Skip to main content Skip to docs navigation

Use Grid to build multiple column layouts. This Grid works on twelve column system, and it contains variants of 12, 6, 4, 3, 2, and 1 column for each breakpoint.

Examples

examples

<Grid cols={{ mobile: 2, tablet: 3, desktop: 4 }}>
  <span>col 1</span>
  <span>col 2</span>
  <span>col 3</span>
  <span>col 4</span>
  <span>col 5</span>
  <span>col 6</span>
</Grid>
{% embed "@seduo-design-system/grid.twig" with { props: {
    cols: {
        mobile: 2,
        tablet: 3,
        desktop: 4,
    },
}} %}
    {% block content %}
        <span>col 1</span>
        <span>col 2</span>
        <span>col 3</span>
        <span>col 4</span>
        <span>col 5</span>
        <span>col 6</span>
    {% endblock %}
{% endembed %}
<Grid cols="{{ { mobile: 2, tablet: 3, desktop: 4 } }}" elementType="section">
<span>col 1</span>
<span>col 2</span>
<span>col 3</span>
<span>col 4</span>
<span>col 5</span>
<span>col 6</span>
</Grid>

API

Name Type Default Required Description
alignmentX [[AlignmentXExtended dictionary][alignment-dictionary] | object] stretch No Apply horizontal alignment of items, use object to set responsive values, e.g. { mobile: 'left', tablet: 'center', desktop: 'right' }
alignmentY [[AlignmentYExtended dictionary][alignment-dictionary] | object] stretch No Apply vertical alignment of items, use object to set responsive values, e.g. { mobile: 'top', tablet: 'center', desktop: 'bottom' }
cols [1 | 2 | 3 | 4 | 5 | 6 | 12 | object] — No Number of columns to use, use object to set responsive values, e.g. { mobile: 1, tablet: 2, desktop: 3 }
elementType HTML element div No Element type to use for the Grid
spacing [SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>] — No Apply custom spacing in both horizontal and vertical directions between items
spacingX [SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>] — No Apply horizontal custom spacing between items
spacingY [SpaceToken | Partial<Record<BreakpointToken, SpaceToken>>] — No Apply vertical custom spacing between items

You can add id, data-* or aria-* attributes to further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available.

Custom Spacing

You can use the spacing prop to apply custom spacing between items in both horizontal and vertical directions. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

You can set custom spacing in the horizontal (x-axis) and vertical (y-axis) direction separately using the spacingX and spacingY props.

Custom spacing:

<Grid spacing="space-1200">
  <!-- Grid content -->
</Grid>

Custom responsive spacing:

<Grid spacing={{ mobile: 'space-400', tablet: 'space-800' }}>
  <!-- Grid content -->
</Grid>

Custom horizontal (x-axis) spacing:

<Grid spacingX={{ mobile: 'space-400', tablet: 'space-800' }}>
  <!-- Grid content -->
</Grid>

Custom vertical (y-axis) spacing:

<Grid spacingY={{ mobile: 'space-400', tablet: 'space-800' }}>
  <!-- Grid content -->
</Grid>

Item Alignment

The alignmentX and alignmentY props are used to control the alignment of items within the Grid container. The available values for these properties can be found in our [alignment dictionary][alignment-dictionary].

alignmentX: Manages horizontal alignment, allowing you to position items to the left, center, or right of the container. It can also be configured with responsive values for different breakpoints. alignmentY: Manages vertical alignment, enabling you to position items at the top, center, or bottom of the container. It supports responsive values for various breakpoints as well.

Both props can be set using either fixed values or objects with breakpoint-specific settings to ensure the alignment adapts across different screen sizes.

Horizontal alignment:

<Grid alignmentX="left">
  <!-- Grid content -->
</Grid>

Horizontal and vertical alignment:

<Grid alignmentX="left" alignmentY="top">
  <!-- Grid content -->
</Grid>

Responsive horizontal and vertical alignment:

<Grid
  alignmentX={{ mobile: 'left', tablet: 'center', desktop: 'right' }}
  alignmentY={{ mobile: 'top', tablet: 'center', desktop: 'bottom' }}
>
  <!-- Grid content -->
</Grid>

👉 Please note that the stretch option may have undesired impact on elements with a defined size or aspect ratio. The dimensions (or the ratio) will not be respected by Grid and the element will be stretched just like any other item.

GridItem

Grid Item is a wrapper for Grid items. It allows you to configure your Grid structure as you wish. Use props to set a column and rows where the Grid Item should start or end. Numeric values are used as a coordinates in the grid.

If you want to set how to item should span over columns or rows, set the value as span X where X is the number of columns or rows the item should span, like this columnStart="span 2" or rowEnd="span 3". Span could be used with responsive props as well and for both start and end. To understand how to use span read one of many articles about CSS Grid, eg. CSS Grid Layout: The Span Keyword.

If you need to set a layout with repetitive columns, you can set this on the Grid component itself using the cols prop and might not need to set columns on the items. Eg. article listing with 3 columns is easier to set using cols="3" on the Grid component than setting columnStart and columnEnd on each GridItem.

GridItem Basic Example

examples

<Grid>
  <GridItem
    columnStart={1}
    columnEnd={4}
    UNSAFE_className="bg-brand text-center"
  >
    1-4
  </GridItem>
  <GridItem
    columnStart={5}
    columnEnd={9}
    UNSAFE_className="bg-brand text-center"
  >
    5-9
  </GridItem>
  <GridItem
    columnStart={10}
    columnEnd="span 2"
    rowStart={2}
    UNSAFE_className="bg-brand text-center"
  >
    10-12
  </GridItem>
</Grid>
...
<Grid>
  <GridItem
    columnStart={6}
    columnEnd="span 2"
    rowStart={1}
    UNSAFE_className="bg-brand text-center"
  >
    2
  </GridItem>
  <GridItem
    columnStart={5}
    columnEnd="span 4"
    rowStart={2}
    UNSAFE_className="bg-brand text-center"
  >
    4
  </GridItem>
  <GridItem
    columnStart={4}
    columnEnd="span 6"
    rowStart={3}
    UNSAFE_className="bg-brand text-center"
  >
    6
  </GridItem>
  <GridItem
    columnStart={3}
    columnEnd="span 8"
    rowStart={4}
    UNSAFE_className="bg-brand text-center"
  >
    8
  </GridItem>
  <GridItem
    columnStart={2}
    columnEnd="span 10"
    rowStart={5}
    UNSAFE_className="bg-brand text-center"
  >
    10
  </GridItem>
</Grid>
<Grid>
<GridItem columnStart={1} columnEnd={4} UNSAFE_className="bg-brand text-center">
    1-4
</GridItem>
<GridItem columnStart={5} columnEnd={9} UNSAFE_className="bg-brand text-center">
    5-9
</GridItem>
<GridItem columnStart={10} columnEnd="span 2" rowStart={2} UNSAFE_className="bg-brand text-center">
    10-12
</GridItem>
</Grid>
...
<Grid>
<GridItem columnStart={6} columnEnd="span 2" rowStart={1} UNSAFE_className="bg-brand text-center">
    2
</GridItem>
<GridItem columnStart={5} columnEnd="span 4" rowStart={2} UNSAFE_className="bg-brand text-center">
    4
</GridItem>
<GridItem columnStart={4} columnEnd="span 6" rowStart={3} UNSAFE_className="bg-brand text-center">
    6
</GridItem>
<GridItem columnStart={3} columnEnd="span 8" rowStart={4} UNSAFE_className="bg-brand text-center">
    8
</GridItem>
<GridItem columnStart={2} columnEnd="span 10" rowStart={5} UNSAFE_className="bg-brand text-center">
    10
</GridItem>
</Grid>

GridItem Advanced Example

examples

<Grid elementType="ul">
  <GridItem elementType="li" columnStart={1} columnEnd={4}>
    1-4
  </GridItem>
  <GridItem
    elementType="li"
    columnStart={5}
    columnEnd={{ mobile: 8, tablet: 9 }}
  >
    5-9 (5-8 on mobile)
  </GridItem>
  <GridItem
    elementType="li"
    columnStart={{ mobile: 9, tablet: 10 }}
    columnEnd={{ mobile: "span 3", tablet: "span 2" }}
  >
    10-12 (9-12 on mobile)
  </GridItem>
</Grid>
<Grid elementType="ul">
<GridItem elementType="li" columnStart="1" columnEnd="4">
    1-4
</GridItem>
<GridItem elementType="li" columnStart="5" columnEnd="{{ { mobile: 8, tablet: 9 } }}">
    5-9 (5-8 on mobile)
</GridItem>
<GridItem elementType="li" columnStart="{{ { mobile: 9, tablet: 10 } }}" columnEnd="{{ { mobile: 'span 3', tablet: 'span 2' } }}">
    10-12 (9-12 on mobile)
</GridItem>
</Grid>

GridItem properties

Name Type Default Required Description
elementType string div No HTML tag to render
columnEnd [number | span \d+ | object] null No Column where the item should end
columnStart [number | span \d+ | object] null No Column where the item should start
rowEnd [number | span \d+ | object] null No Row where the item should end
rowStart [number | span \d+ | object] null No Row where the item should start

You can add id, data-* or aria-* attributes to further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available.