@commercetools-uikit/grid
Version:
The Grid component can be used to implement layouts using CSS-Grid.
45 lines (44 loc) • 1.64 kB
TypeScript
import { ReactNode } from 'react';
export type TGridItemProps = {
children?: ReactNode;
gridArea?: string;
gridColumn?: string;
gridColumnStart?: string;
gridColumnEnd?: string;
gridRow?: string;
gridRowStart?: string;
gridRowEnd?: string;
justifySelf?: 'start' | 'end' | 'center' | 'stretch';
alignSelf?: 'start' | 'end' | 'center' | 'stretch';
placeSelf?: 'start' | 'end' | 'center' | 'stretch';
};
export type TGridProps = {
children: ReactNode;
display?: 'grid' | 'inline-grid';
gridTemplateColumns?: string;
gridTemplateRows?: string;
gridTemplateAreas?: string;
gridTemplate?: string;
gridColumnGap?: string;
gridRowGap?: string;
gridGap?: string;
justifyItems?: 'start' | 'end' | 'center' | 'stretch';
alignItems?: 'start' | 'end' | 'center' | 'stretch';
placeItems?: 'start' | 'end' | 'center' | 'stretch';
justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
placeContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
gridAutoColumns?: string;
gridAutoRows?: string;
gridAutoFlow?: string;
grid?: string;
};
declare const Grid: {
({ display, ...props }: TGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
displayName: string;
Item: {
(props: TGridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
displayName: string;
};
};
export default Grid;