@commercetools-uikit/grid

Grid

Description

The Grid component can be used to implement layouts using CSS-Grid.

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).

The component accepts all the supported properties of CSS Grid, both for the parent container and the children elements (<Grid.Item>).

Installation

yarn add @commercetools-uikit/grid

npm --save install @commercetools-uikit/grid

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import Grid from '@commercetools-uikit/grid';

/**
 * We also recommend having a look at the [Grid story examples](https://uikit.commercetools.com/?path=/story/examples-components-grid--with-fixed-columns)
 * to see more detailed examples of common use cases of the CSS Grid layout.
 **/
const Example = () => (
  <Grid
    gridGap="16px"
    gridAutoColumns="1fr"
    gridTemplateColumns="repeat(3, 1fr)"
  >
    <Grid.Item>{'1'}</Grid.Item>
    <Grid.Item>{'2'}</Grid.Item>
    <Grid.Item>{'3'}</Grid.Item>
    <Grid.Item>{'4'}</Grid.Item>
    <Grid.Item>{'5'}</Grid.Item>
  </Grid>
);

export default Example;

Properties

Props	Type	Required	Default	Description
children	ReactNode	✅
display	union Possible values: 'grid' , 'inline-grid'		'grid'
gridTemplateColumns	string
gridTemplateRows	string
gridTemplateAreas	string
gridTemplate	string
gridColumnGap	string
gridRowGap	string
gridGap	string
justifyItems	union Possible values: 'start' , 'end' , 'center' , 'stretch'
alignItems	union Possible values: 'start' , 'end' , 'center' , 'stretch'
placeItems	union Possible values: 'start' , 'end' , 'center' , 'stretch'
justifyContent	union Possible values: , 'start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'
alignContent	union Possible values: , 'start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'
placeContent	union Possible values: , 'start', 'end', 'center', 'stretch', 'space-around', 'space-between', 'space-evenly'
gridAutoColumns	string
gridAutoRows	string
gridAutoFlow	string
grid	string

The component accepts all supported CSS Grid properties, as listed here, in camelCase format