Components

Grid

An equal-column, responsive grid for page regions and widget layouts, with a cell component (Grid.Item).

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

Grid places children in equal-width columns. The default is a single column (columns={1}) with a lg gap (12 px). The number of columns runs from 1 to 12.

First item

Second item

Third item

import { Box, Grid, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Grid columns={3}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Responsive columns

columns can take an object by viewport width: base below 1024 px, md from 1024 px, lg from 1440 px. A breakpoint without a value keeps the smaller one.

First item

Second item

Third item

Fourth item

import { Box, Grid, Text } from '@bigbang/ui';

export default function Responsive() {
  return (
    <Grid columns={{ base: 1, md: 2, lg: 4 }}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Fourth item</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Cell width

Grid.Item spans one or more columns with span. 'full' takes the whole row. span can also take an object per breakpoint.

First item

Second item

Third item

import { Box, Grid, Text } from '@bigbang/ui';

export default function Span() {
  return (
    <Grid columns={3}>
      <Grid.Item span={3}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item span={2}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Gap

gap sets the space between both columns and rows from the space scale; the default is lg. Row and column gaps are not set separately.

First item

Second item

Third item

First item

Second item

Third item

import { Box, Grid, Stack, Text } from '@bigbang/ui';

export default function Gap() {
  return (
    <Stack gap="2xl">
      <Grid columns={3} gap="xs">
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>First item</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Second item</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Third item</Text>
          </Box>
        </Grid.Item>
      </Grid>
      <Grid columns={3} gap="2xl">
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>First item</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Second item</Text>
          </Box>
        </Grid.Item>
        <Grid.Item>
          <Box padding="md" border="subtle" radius="sm">
            <Text>Third item</Text>
          </Box>
        </Grid.Item>
      </Grid>
    </Stack>
  );
}

As a list

With render={<ul />} Grid becomes a <ul>, and with render={<li />} Grid.Item becomes an <li>. In card grids a screen reader announces the number of items.

First item
Second item
Third item

import { Box, Grid, Text } from '@bigbang/ui';

export default function AsList() {
  return (
    <Grid render={<ul aria-label="Item list" />} columns={3}>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item render={<li />}>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}

Light and dark mode

Grid carries no colour; the colours of the children come from their own components and change by themselves in light and dark mode.

First item

Second item

Third item

First item

Second item

Third item

import { Box, Grid, Text } from '@bigbang/ui';

export default function Default() {
  return (
    <Grid columns={3}>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>First item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Second item</Text>
        </Box>
      </Grid.Item>
      <Grid.Item>
        <Box padding="md" border="subtle" radius="sm">
          <Text>Third item</Text>
        </Box>
      </Grid.Item>
    </Grid>
  );
}