SimpleGrid

Equal-column CSS grid with a fixed track count and shared gap. Use cols for the column count and spacing for the gap token.

Examples

Default

Three equal columns with spacing="sm".

import { SimpleGrid } from '@var-ui/react';

<SimpleGrid cols={3} spacing="sm">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</SimpleGrid>

Columns

Set cols to change the track count — here four columns with default md spacing.

import { SimpleGrid } from '@var-ui/react';

<SimpleGrid cols={4} spacing="md">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</SimpleGrid>

Props

Accessibility

SimpleGrid is a layout primitive (display: grid). Keep interactive content in semantic children; the grid itself does not add landmarks or roles.