Grid

Two-dimensional layout with equal-width or automatically fitting columns.

Examples

Fixed Columns

AnalyticsCard 1

BillingCard 2

CustomersCard 3

InventoryCard 4

OrdersCard 5

ReportsCard 6

SettingsCard 7

TeamCard 8

function GalleryCards(): React.JSX.Element {
  return (
    <>
      {cardNames.map((name, index) => (
        <Card className={cardClass} key={name} padding={4}>
          <VStack gap={2}>
            <Text type="label">{name}</Text>
            <Text type="supporting">Card {index + 1}</Text>
          </VStack>
        </Card>
      ))}
    </>
  );
}

<Grid columns={3} gap={4}>
  <GalleryCards />
</Grid>

Responsive Columns

Resize the viewport to see the gallery change from one to two to four columns.

AnalyticsCard 1

BillingCard 2

CustomersCard 3

InventoryCard 4

OrdersCard 5

ReportsCard 6

SettingsCard 7

TeamCard 8

function GalleryCards(): React.JSX.Element {
  return (
    <>
      {cardNames.map((name, index) => (
        <Card className={cardClass} key={name} padding={4}>
          <VStack gap={2}>
            <Text type="label">{name}</Text>
            <Text type="supporting">Card {index + 1}</Text>
          </VStack>
        </Card>
      ))}
    </>
  );
}

<VStack gap={4}>
  <Text type="body">
    Resize the viewport to see the gallery change from one to two to four
    columns.
  </Text>
  <Grid columns={{base: 1, sm: 2, lg: 4}} gap={3}>
    <GalleryCards />
  </Grid>
</VStack>

Auto Fit

Cards reflow automatically without configured breakpoints.

AnalyticsCard 1

BillingCard 2

CustomersCard 3

InventoryCard 4

OrdersCard 5

ReportsCard 6

SettingsCard 7

TeamCard 8

function GalleryCards(): React.JSX.Element {
  return (
    <>
      {cardNames.map((name, index) => (
        <Card className={cardClass} key={name} padding={4}>
          <VStack gap={2}>
            <Text type="label">{name}</Text>
            <Text type="supporting">Card {index + 1}</Text>
          </VStack>
        </Card>
      ))}
    </>
  );
}

<VStack gap={4}>
  <Text type="body">
    Cards reflow automatically without configured breakpoints.
  </Text>
  <Grid gap={5} minChildWidth={220}>
    <GalleryCards />
  </Grid>
</VStack>

Auto Fit Narrow Container

A minimum child width wider than its container clamps to the container width instead of overflowing it.

AnalyticsCard 1

BillingCard 2

CustomersCard 3

InventoryCard 4

OrdersCard 5

ReportsCard 6

SettingsCard 7

TeamCard 8

function GalleryCards(): React.JSX.Element {
  return (
    <>
      {cardNames.map((name, index) => (
        <Card className={cardClass} key={name} padding={4}>
          <VStack gap={2}>
            <Text type="label">{name}</Text>
            <Text type="supporting">Card {index + 1}</Text>
          </VStack>
        </Card>
      ))}
    </>
  );
}

<VStack gap={4}>
  <Text type="body">
    A minimum child width wider than its container clamps to the container
    width instead of overflowing it.
  </Text>
  <div className={narrowContainerClass}>
    <Grid gap={3} minChildWidth={320}>
      <GalleryCards />
    </Grid>
  </div>
</VStack>

API

Grid

Two-dimensional layout with equal-width or automatically fitting columns.

When Variant 1

Prop	Type	Default	Description
data-testid	string	—	Test ID applied to the root element.
gap	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	—	Gap between children.
columns	GridColumns	—	Number of equal-width columns, optionally by breakpoint.
minChildWidth	never	—

When Variant 2

Prop	Type	Default	Description
data-testid	string	—	Test ID applied to the root element.
gap	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	—	Gap between children.
columns	never	—
minChildWidth	SizeValue	—	Minimum child width used to automatically fit as many columns as possible. Numbers are pixels, strings are used as-is.