Grid Layout

Grid Layout in Storybook

Grid Layout extends the Grid component and simplifies its usage. We recommend using Grid Layout when building layouts, as you can achieve much of the same results as you could when using Grid, but with greater ease of configuration and maintenance. Switch to Grid if your layout is more complex.

<GridLayout columns={[1, 1]}>
  <SomeElement />
  <SomeElement />
</GridLayout>

You can set props for the grid items, see examples below.

gridItems

Passing [null, { colSpan: 3 }] applies the property colSpan: 3 to the second child.

<GridLayout
  columns={[1, 1]}
  gridItems={[null, { colSpan: 3 }]}
  id="grid-layout">
  <SomeElement />
  <SomeElement />
</GridLayout>

defaultGridItem

Passing { colSpan: 3, clone: false } are applied to all GridItem children. To override colSpan on the second child, pass [null, { colSpan: 1 }] to gridItems

<GridLayout
  columns={[1, 1]}
  defaultGridItem={{ colSpan: 2, clone: false }}
  gridItems={[null, { colSpan: 1 }]}
  id="grid-layout">
  <SomeElement />
  <SomeElement />
</GridLayout>