@commercetools-uikit/grid

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@commercetools-uikit/grid
1394715.14.12 days ago3 years agoMinified + gzip package size for @commercetools-uikit/grid in KB

Readme

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