Skip to main content

Grid

Grid in Storybook

Examples​

Basic example​

A basic Jutro grid container consists of a Grid component with a number of children components. If these children are GridItem components, you can use the additional GridItem props to have further control of the item within the layout.

The default behavior will assume one column and add each new item to a new row.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem>
      <strong>First Item</strong>
  </GridItem>
  <GridItem>
      <strong>Second Item</strong>
  </GridItem>
  <GridItem>
      <strong>Third Item</strong>
  </GridItem>
</Grid>

Multiple column example​

You can add additional columns by defining column widths. By default, items will fill each column before moving to the next row. In this example, three items are added to a two column grid.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={['1fr', '1fr']}>
  <GridItem>
      <strong>First Item</strong>
  </GridItem>
  <GridItem>
      <strong>Second Item</strong>
  </GridItem>
  <GridItem>
      <strong>Third Item</strong>
  </GridItem>
</Grid>

autoRows example​

You can use the autoRows property to determine the row height for rows not defined in the rows attribute. This allows you to set the height when the length of the grid may be unknown. In this example, the first row has a height of 50 pixels and additional ones will have a larger height of 75 pixels.

import { Grid, GridItem } from '@jutro/layout';

<Grid
rows={['50px']}
autoRows={['75px']}>
  <GridItem>
      <strong>First Item</strong>
  </GridItem>
  <GridItem>
      <strong>Second Item</strong>
  </GridItem>
  <GridItem>
      <strong>Third Item</strong>
  </GridItem>
</Grid>

Justify examples​

You can use the justifyContent property set how columns are aligned in the grid.

import { Grid, GridItem } from '@jutro/layout';

<Grid
justifyContent='center'>
  <GridItem>
      <strong>First Item</strong>
  </GridItem>
  <GridItem>
      <strong>Second Item</strong>
  </GridItem>
  <GridItem>
      <strong>Third Item</strong>
  </GridItem>
</Grid>

The justifyItems property is used to set how items are aligned in their container.

import { Grid, GridItem } from '@jutro/layout';

<Grid
justifyItems='center'>
  <GridItem>
      <strong>First Item</strong>
  </GridItem>
  <GridItem>
      <strong>Second Item</strong>
  </GridItem>
  <GridItem>
      <strong>Third Item</strong>
  </GridItem>
</Grid>

To set how specific items are aligned in their container, you use the justifySelf property on the appropriate GridItem.

import { Grid, GridItem } from '@jutro/layout';

<Grid>
  <GridItem justifySelf='stretch'>
    <strong>justifySelf='stretch'</strong>
  </GridItem>
  <GridItem justifySelf='start'>
    <strong>justifySelf='start'</strong>
  </GridItem>
  <GridItem justifySelf='center'>
    <strong>justifySelf='center'</strong>
  </GridItem>
  <GridItem justifySelf='end'>
    <strong>justifySelf='end'</strong>
  </GridItem>
</Grid>

Align examples​

You use the alignItems property to set how items are vertically aligned in their container.

import { Grid, GridItem } from '@jutro/layout';

<Grid
  columns={[
      '1fr',
      '1fr'
  ]}
  alignItems='center'>
    <GridItem>
        <p><strong>First Item</strong></p><p>&nbsp;</p>
    </GridItem>
    <GridItem>
        <strong>Second Item</strong>
    </GridItem>
</Grid>

To set how specific items are vertically aligned in their container, you use the alignSelf property on the appropriate GridItem.

import { Grid, GridItem } from '@jutro/layout';

<Grid
columns={['1fr', '1fr', '1fr', '1fr', '1fr']}>
  <GridItem>
    <p><strong>alignSelf='stretch'</strong></p><p>&nbsp;</p>
  </GridItem>
  <GridItem alignSelf='center'>
    <strong>alignSelf='center'</strong>
  </GridItem>
  <GridItem alignSelf='start'>
    <strong>alignSelf='start'</strong>
  </GridItem>
  <GridItem alignSelf='end'>
    <strong>alignSelf='end'</strong>
  </GridItem>
  <GridItem alignSelf='baseline'>
    <strong>alignSelf='baseline'</strong>
  </GridItem>
</Grid>

colSpan example​

The colSpan prop on a GridItem sets how many columns the item will span.

import { Grid, GridItem } from '@jutro/layout';

<Grid
columns={['1fr', '1fr', '1fr']}
rows={['1fr', '1fr']}
gap="large">
  <GridItem colSpan="3">
      <strong>First Item</strong>
  </GridItem>
  <GridItem >
      <strong>Second Item</strong>
  </GridItem>
  <GridItem colSpan="2">
      <strong>Third Item</strong>
  </GridItem>
</Grid>

rowSpan example​

The rowSpan prop on a GridItem sets how many rows the item will span.

import { Grid, GridItem } from `@jutro/layout`;

<Grid columns={['1fr', '1fr']} rows={['1fr', '1fr']} gap="large">
  <GridItem rowSpan="2" >
    <strong>First Item</strong>
  </GridItem>
  <GridItem >
    <strong>Second Item</strong>
  </GridItem>
  <GridItem >
    <strong>Third Item</strong>
  </GridItem>
</Grid>

colStart and rowStart examples​

The colStart and rowStart props on a GridItem set which column and row the item starts in, respectively. In combination with colSpan and rowSpan, these props can be used for a high granularity of customization of the Grid layout.

import { Grid, GridItem } from `@jutro/layout`;

<Grid
  columns={['1fr', '1fr', '1fr']}
  rows={['1fr', '1fr', '1fr']}
  gap="large"
>
  <GridItem colSpan={2}>
    <strong>First Item</strong>
  </GridItem>
  <GridItem rowSpan={2} colStart={1}>
    <strong>Second Item</strong>
  </GridItem>
  <GridItem>
    <strong>Third Item</strong>
  </GridItem>
  <GridItem rowSpan={2} rowStart={1} colStart={3}>
    <strong>Fourth Item</strong>
  </GridItem>
  <GridItem colSpan={2}>
    <strong>Fifth Item</strong>
  </GridItem>
</Grid>