Grid Layout

Grid Layout in Storybook

Overview

GridLayout extends the Grid component and simplifies its usage. We recommend using GridLayout 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>

Note: GridLayout automatically wraps any children element into a GridItem component, so you can pass any element as children. Or you can directly pass GridItem components and get additional control.

While you control the overall layout at GridLayout level, you can extend / override this setting at GridItem level. See the examples below for more details.

Setting children properties

A component position and behavior can be modified by wrapping it in a GridItem component. For example, to make one of the components two columns wide you can write:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridItem colSpan={2}> 
    {   /* Item content */ }
  <GridItem>
  <GridItem> 
    {   /* Item content */ }
  <GridItem>
  <GridItem > 
    {   /* Item content */ }
  <GridItem>
</GridLayout>

See the grid page for more information about GridItem.

Alternatively, given that GridLayout automatically wraps any children element into a GridItem component, you can define the properties for all their children in a single place by using the gridItems property to GridLayout.

<GridLayout
  columns={[1, 1]}
  gridItems={[{ colSpan: 2 }, null, null]}
  id="grid-layout">
  <SomeElement /> { /* will be 2-column wide */}
  <SomeElement />
  <SomeElement /> 
</GridLayout>

defaultGridItem property

Using defaultGridItem property at GridLayout level, you can define the default settings to be applied to any children in case that no other override is applied.

In this example, the default settings are defined and a different value is defined for second child.

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

GridItem clone option

Warning: GridItem passes a style prop to a wrapped component. The component then has to pass it to the underlying HTML tag. If it doesn't do that (some Jutro components don't), try passing clone={false} to GridItem:

<GridItem
  colSpan={2}
  clone={false}>
  <SomeElement />
</GridItem>

Then SomeElement will be wrapped in an extra <div> that is styled instead.

Nesting multiple GridLayout components

You can put GridLayouts inside another GridLayout to implement more complex designs:

<GridLayout
  columns={[1, 1]}
  id="grid-layout">
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
  </GridLayout>
</GridLayout>