Grid

The easiest way to use Grid is to define the amount of rows or columns you want to render and apply any additional layout properties like gap.

<Grid columns={2} gap={4}>
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
</Grid>

For more advanced layout, you can use columns and rows css template syntax, supporting fraction based sizes, repeat() and other functions.

<Grid columns="2fr 1fr" rows="1fr 2fr" gap={4}>
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
  <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
</Grid>

In case you're looking for more flexbox oriented layout features, applying utility styles or working with design tokens, you might want to also check more about the View utility.

To apply individual grid properties to each of the item, wrap them with Grid.Item. It allows you to control their individual size with colStart, colEnd, colSpan, rowStart, rowEnd and rowSpan properties.

<Grid columns={3} gap={3}>
  <Grid.Item rowSpan={2}>
    <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
  </Grid.Item>
  <Grid.Item colSpan={2}>
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid.Item>
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
</Grid>

For easier control over the grid layout, you can also use its template areas syntax. Apply an areas array to the Grid, where each array item represents a row layout, and then assign an area to each of the Grid.Item children. Here's an example of the same layout as above implemented with template areas:

<Grid areas={["a b b", "a c d"]} gap={3}>
  <Grid.Item area="a">
    <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
  </Grid.Item>
  <Grid.Item area="b">
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid.Item>
  <Grid.Item area="c">
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid.Item>
  <Grid.Item area="d">
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid.Item>
</Grid>

Template areas are usually more verbose compared to the previous methods but it gives you more control over complex layouts, especially once you want to make those layouts responsive.

All Grid layout properties support responsive syntax, which means you can pass an object with values and control its rendering based on the viewport size. We're using a mobile-first approach, which means that you don't have to define a value for every single viewport. Instead, you only need to define the values at which they change, and the component will apply them from smallest to largest.

For example, if you pass { s: 2, l: 3 }, Grid will switch to 3-column layout starting from large screen size.

<Grid columns={{ s: 2, l: 3 }} gap={4}>
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
</Grid>

Properties supporting responsive values:

• Grid: gap, align, justify, rows, columns, areas, autoFlow, autoRows, autoColumns
• Grid.Item: colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan

• Use the as and attributes properties on both Grid and Grid.Item to render it with custom HTML tags and aria- attributes