Grid

Equal-column CSS grid with responsive column counts.

import { Grid } from "@ps1ui/core";

Columns

<Grid columns={3} gap="md">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</Grid>

Responsive columns

<Grid columns={{ base: 1, sm: 2, md: 3 }} gap="md">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</Grid>

Column span with GridItem

hero

<Grid columns={4} gap="md">
  <GridItem colSpan={2}>hero</GridItem>
  <GridItem>02</GridItem>
  <GridItem>03</GridItem>
  <GridItem>04</GridItem>
  <GridItem>05</GridItem>
  <GridItem>06</GridItem>
</Grid>

Responsive column span

hero

<Grid columns={4} gap="md">
  <GridItem colSpan={{ base: 4, md: 2, lg: 4 }}>hero</GridItem>
  <GridItem>02</GridItem>
  <GridItem>03</GridItem>
  <GridItem>04</GridItem>
  <GridItem>05</GridItem>
</Grid>

Props

Prop	Type	Default	Description
`columns`	`number`	`1`	Number of equal-width columns.
`gap`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Gap between cells on the space scale.

All native <div> attributes are also accepted.

GridItem Props

Prop	Type	Default	Description
`colSpan`	`number`	`1`	Number of grid columns the item spans.

All native <div> attributes are also accepted.