Grid

Usage#

import { Grid } from '@backstage/ui';

<Grid.Root />

API reference#

Grid.Root#

This is the grid container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive.

The grid component also accepts all the spacing props from the Box component.

Grid.Item#

If you need more control over the columns, you can use the grid item component. This will give you access to rowSpan, colSpan, start and end. All values are responsive. This component is optional, you can use any elements directly if you prefer.

Examples#

Simple grid#

A simple grid with 3 columns and a gap of md.

<Grid.Root columns="3" gap="md">
  <Box>Hello World</Box>
  <Box>Hello World</Box>
  <Box>Hello World</Box>
</Grid.Root>

Complex grid#

You can also use the grid item to create more complex layouts. In this example the first column will span 1 column and the second column will span 2 columns.

<Grid.Root columns="3" gap="md">
  <Grid.Item colSpan="1">
    Hello World
  </Grid.Item>
  <Grid.Item colSpan="2">
    Hello World
  </Grid.Item>
</Grid.Root>

Mixing rows and columns#

The grid item component also supports the rowSpan prop, which allows you to span multiple rows within the grid layout. In this example, the first item will span 2 rows to achieve a dynamic and flexible grid structure.

<Grid.Root columns="3" gap="md">
  <Grid.Item colSpan="1" rowSpan="2">
    Hello World
  </Grid.Item>
  <Grid.Item colSpan="2">
    Hello World
  </Grid.Item>
  <Grid.Item colSpan="2">
    Hello World
  </Grid.Item>
</Grid.Root>

Responsive grid#

The grid component also supports responsive values, making it easy to create responsive designs.

<Grid.Root columns={{ xs: 1, md: 3 }} gap={{ xs: 'xs', md: 'md' }}>
  <Grid.Item colSpan={{ xs: 1, md: 2 }}>
    <Hello World
  </Grid.Item>
  <Grid.Item colSpan={{ xs: 1, md: 1 }}>
    Hello World
  </Grid.Item>
</Grid.Root>

Start and End#

The start and end props can be used to position the item in the grid.

<Grid.Root columns="3" gap="md">
  <Grid.Item colStart="2" colEnd="4">
    Hello World
  </Grid.Item>
</Grid.Root>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

• bui-Grid

Changelog#

• 0.8.0 - Added support for data attributes in <Box />, <Container />, <Flex />, and <Grid /> components, ensuring they are correctly applied to the rendered elements. #31374
• 0.5.0 - Rename Grid component to <Grid.Root /> #30013
• 0.5.0 - Fixes spacing props on layout components #30013