Grid

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>

Usage

The Grid component is a technical component that facilitates the use of Grid CSS styling. For usage recommendations, see the official CSS grid layout documentation.

Code

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

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

Import statement

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

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

Grid

autoRows: Type
array
Description
Defines implicit rows.
blockPointerEvents: Type
boolean
Description
If set to true, pointer events will be blocked.
children: Type
node
Description
Children; preferably 'GridItem' but works with any child.
className: Type
string
Description
CSS class name for this component.
columns: Type
string | number[]
Description
Defines explicit column widths.
gap: Type
'none' | 'small' | 'medium' | 'large'
Description
Gap size between the rows and columns.

Default value
'medium'
hgap: Type
'none' | 'small' | 'medium' | 'large'
Description
Horizontal gap size between the columns. If unspecified, falls back to the gap property.
justifyContent: Type
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Description
Justify logic for the grid within its container.

Default value
'stretch'
justifyItems: Type
'left' | 'center' | 'right' | 'around' | 'between' | 'evenly' | 'stretch'
Description
Justify logic for all items within the grid.

Default value
'stretch'
rows: Type
string | number[]
Description
Defines explicit row heights.
style: Type
React.CSSProperties | undefined
Description
DOM element styles.
tag: Type
string
Description
Optional DOM tag to render.

Default value
'div'
valignItems: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Vertical alignment for all items within the grid.

Default value
'stretch'
vgap: Type
'none' | 'small' | 'medium' | 'large'
Description
Vertical gap between the rows. If unspecified, falls back to the gap property.
alignContentdeprecated: Type
'start' | 'center' | 'end' | 'baseline' | 'stretch'
Description
Aligns rows vertically within the grid container.

Default value
'stretch'
phonedeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWidedeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
repeatdeprecated: Type
'auto-fit' | 'auto-fill' | number | string
Description
Logic for how columns will be repeated.
tabletdeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
valignContentdeprecated: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns rows vertically within the grid container.

Default value
'stretch'

GridItem

alignSelf: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns the item horizontally within its container.

Default value
'stretch'
colSpan: Type
number | string
Description
Specifies how many columns the element will span.
colStart: Type
number | string
Description
Specifies a grid item's start column position within the grid.
justifySelf: Type
'start' | 'center' | 'end' | 'stretch'
Description
Aligns the items vertically within their containers.

Default value
'stretch'
rowSpan: Type
number | string
Description
Specifies how many rows the element will span.
rowStart: Type
number | string
Description
Specifies a grid item's start column position within the grid.
aligndeprecated: Type
'start' | 'center' | 'end' | 'stretch'
Description
Aligns the items vertically within their containers. Deprecated since 10.9.0, use justifySelf instead.
clonedeprecated: Type
boolean
Description
Renders the child without a tag wrapper. It passes classNames and styles directly to the child element if possible. If not possible, it falls back to wrapping with a tag (for React elements which are not valid). Deprecated since 10.9.0.
fullWidthdeprecated: Type
boolean
Description
If set to true, item takes full width of the parent grid. Ignored if colStart or colSpan is specified. Deprecated since 10.9.0.
phonedeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'phone' breakpoint. Deprecated since 10.9.0.
phoneWidedeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'phoneWide' breakpoint. Deprecated since 10.9.0.
tabletdeprecated: Type
Grid
Description
Any Grid properties that will be used instead for the 'tablet' breakpoint. Deprecated since 10.9.0.
textAligndeprecated: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns text inside item. Deprecated since 10.9.0.
valigndeprecated: Type
'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'
Description
Aligns the item horizontally within its container. Deprecated since 10.9.0, use alignSelf instead.
visibledeprecated: Type
boolean
Description
Specifies whether the GridItem is visible. Deprecated since 10.9.0.

Hooks

No hooks are available for Grid.

Translation keys

There are no translations for Grid.

For information on how to manage translations, see our section about Internationalization.

Escape hatches

For more information, see our documentation about escape hatches.

Component	Property	Alternative
Grid	phone	None
Grid	phoneWide	None
Grid	tablet	None
Grid	repeat	None
GridItem	phone	None
GridItem	phoneWide	None
GridItem	tablet	None
GridItem	clone	None
GridItem	fullWidth	None
GridItem	visible	None
GridItem	textAlign	None
GridItem	vAlign	alignSelf
GridItem	align	justifySelf

Examples​

Basic example​

Multiple column example​

autoRows example​

Justify examples​

Align examples​

colSpan example​

rowSpan example​

colStart and rowStart examples​

Usage​

Code​

Import statement​

Component contract​

Properties​

Grid​

autoRows​

blockPointerEvents​

children​

className​

columns​

gap​

hgap​

justifyContent​

justifyItems​

rows​

style​

tag​

valignItems​

vgap​

alignContentdeprecated​

phonedeprecated​

phoneWidedeprecated​

repeatdeprecated​

tabletdeprecated​

valignContentdeprecated​

GridItem​

alignSelf​

colSpan​

colStart​

justifySelf​

rowSpan​

rowStart​

aligndeprecated​

clonedeprecated​

fullWidthdeprecated​

phonedeprecated​

phoneWidedeprecated​

tabletdeprecated​

textAligndeprecated​

valigndeprecated​

visibledeprecated​

Hooks​

Translation keys​

Escape hatches​

Changelog​

10.9.0​

Examples

Basic example

Multiple column example

`autoRows` example

Justify examples

Align examples

`colSpan` example

`rowSpan` example

`colStart` and `rowStart` examples

Usage

Code

Import statement

Component contract

Properties

Grid

`autoRows`

`blockPointerEvents`

`children`

`className`

`columns`

`gap`

`hgap`

`justifyContent`

`justifyItems`

`rows`

`style`

`tag`

`valignItems`

`vgap`

`alignContent`deprecated

`phone`deprecated

`phoneWide`deprecated

`repeat`deprecated

`tablet`deprecated

`valignContent`deprecated

GridItem

`alignSelf`

`colSpan`

`colStart`

`justifySelf`

`rowSpan`

`rowStart`

`align`deprecated

`clone`deprecated

`fullWidth`deprecated

`phone`deprecated

`phoneWide`deprecated

`tablet`deprecated

`textAlign`deprecated

`valign`deprecated

`visible`deprecated

Hooks

Translation keys

Escape hatches

Changelog

10.9.0