Grid

Import

import { Grid } from '@contentful/f36-components';
// or
import { Grid } from '@contentful/f36-core';

Grid vs. Flexbox

The main difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layouts in one dimension - either a row or a column. Grid was designed for two-dimensional layout rows, and columns.

Examples

The Grid consists of two components:

• Grid: Used as a container for grid items
• Grid.Item: Elements within the Grid

Basic usage

Hide code
function BasicGridExample() {
  return (
    <Grid
      style={{ width: '100%' }}
      columns="1fr 2fr"
      rowGap="spacingM"
      columnGap="spacingM"
    >
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
    </Grid>
  );
}
function BasicGridExample() {
  return (
    <Grid
      style={{ width: '100%' }}
      columns="1fr 2fr"
      rowGap="spacingM"
      columnGap="spacingM"
    >
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray800, height: '100px' }} />
    </Grid>
  );
}
Open in Playground

Repeat notation

repeat() is a css notation that you can use with the gridColumns and girdRows properties to make your rules more concise and easier to understand when creating a large amount of columns or rows

Example: gridColumns="1fr 2fr 1fr 2fr 1fr 2fr" is same as gridColumns="repeat(3, 1fr 2fr)" see below.

Hide code
function RepeatNotationGridExample() {
  return (
    <>
      <Grid
        style={{ width: '100%' }}
        columns="1fr 2fr 1fr 2fr 1fr 2fr"
        columnGap="spacingM"
      >
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
      </Grid>

      <Grid
        style={{ width: '100%' }}
        columns="repeat(3, 1fr 2fr)"
        columnGap="spacingM"
        marginTop="spacingM"
      >
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
      </Grid>
    </>
  );
}
function RepeatNotationGridExample() {
  return (
    <>
      <Grid
        style={{ width: '100%' }}
        columns="1fr 2fr 1fr 2fr 1fr 2fr"
        columnGap="spacingM"
      >
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray800, height: '100px' }}
        />
      </Grid>

      <Grid
        style={{ width: '100%' }}
        columns="repeat(3, 1fr 2fr)"
        columnGap="spacingM"
        marginTop="spacingM"
      >
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
        <Grid.Item
          style={{ backgroundColor: tokens.gray600, height: '100px' }}
        />
      </Grid>
    </>
  );
}
Open in Playground

FR unit

Fr is a fractional unit and 1fr stands for 1 part of the available space. It differs from percentage unit because it distributes available space.

If you place a larger item into a track then the way the fr until will work is to allow that track to take up more space and distribute what is left over.

Hide code
function FrGridExample() {
  const border = `1px solid ${tokens.gray700}`;
  return (
    <Grid style={{ width: '100%' }} columns="1fr 1fr 1fr">
      <p style={{ border }}>WelcomeToTheAwesomeContentfulGridSystem</p>
      <p style={{ border }}>Contentful</p>
      <p style={{ border }}>Forma 36</p>
      <p style={{ border }}>Welcome To The Awesome Contentful Grid System</p>
      <p style={{ border }}>Contentful</p>
      <p style={{ border }}>Forma 36</p>
    </Grid>
  );
}
function FrGridExample() {
  const border = `1px solid ${tokens.gray700}`;
  return (
    <Grid style={{ width: '100%' }} columns="1fr 1fr 1fr">
      <p style={{ border }}>WelcomeToTheAwesomeContentfulGridSystem</p>
      <p style={{ border }}>Contentful</p>
      <p style={{ border }}>Forma 36</p>
      <p style={{ border }}>Welcome To The Awesome Contentful Grid System</p>
      <p style={{ border }}>Contentful</p>
      <p style={{ border }}>Forma 36</p>
    </Grid>
  );
}
Open in Playground

Span keyword

Span keyword works on grid items with the gridArea property, use span to avoid specifying the end lines for a column or a row.

i.e. instead of specifying columnStart and columnEnd you can use span to make the grid item take 4 columns

Hide code
function SpanKeywordGridExample() {
  return (
    <Grid style={{ width: '100%' }} columns={6}>
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
      <Grid.Item
        area="span 4 / span 4"
        style={{ backgroundColor: tokens.gray700, height: '100px' }}
      />
    </Grid>
  );
}
function SpanKeywordGridExample() {
  return (
    <Grid style={{ width: '100%' }} columns={6}>
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
      <Grid.Item
        area="span 4 / span 4"
        style={{ backgroundColor: tokens.gray700, height: '100px' }}
      />
    </Grid>
  );
}
Open in Playground

Content alignment

Just like Flex the Grid comes with justifyContent, justifyItems, alignItems, alignContent, ..etc.

Hide code
function ContentAlignmentGridExample() {
  return (
    <Grid
      style={{ width: '100%' }}
      columns="250px 250px"
      justifyContent="space-between"
    >
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
    </Grid>
  );
}
function ContentAlignmentGridExample() {
  return (
    <Grid
      style={{ width: '100%' }}
      columns="250px 250px"
      justifyContent="space-between"
    >
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
      <Grid.Item style={{ backgroundColor: tokens.gray700, height: '100px' }} />
    </Grid>
  );
}
Open in Playground

Accessibility

According to WCAG C27 technique, the dom order must match the visual order.

The grid can re-order it's content in various ways through the order css property on grid items, this changes the visual order but the dom order stays the same, hence, keyboard navigation and focus order maybe affected.

Set the correct order of the elements with tabindex attribute to avoid accessibility issues.

Props (API reference)

Grid

Grid.Item