Grid

Overview

Grid renders a low-chrome CSS grid container for explicit columns, intrinsic auto-fill layouts, and optional child placement through Grid.Item.

Usage

<script lang="ts">
  import { Grid } from '@lostgradient/cinder/grid';
</script>

<Grid columns={3} gap="var(--cinder-space-4)">
  <Grid.Item span={2}>Wide item</Grid.Item>
  <div>Regular item</div>
</Grid>

Use minItemWidth for intrinsic responsive grids without adding media queries:

<Grid minItemWidth="16rem" gap="var(--cinder-space-6)">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</Grid>

Live preview

When to use

Use when

Building form layouts, card grids, or dashboards that need two-dimensional placement.
Creating intrinsic responsive grids by passing minItemWidth.

Avoid when

Presenting homogeneous gallery tiles - use grid-list instead. Use Grid list instead
Packing variable-height content into waterfall columns - use masonry instead. Use Masonry instead

Examples

Auto-fill cards

Grid can create intrinsic responsive columns from a minimum item width.

Explicit placement

A 12-column grid using Grid.Item for spans while plain children use auto-placement.

Props

Props for grid
Name	Type	Default	Required	Description
`columns`	`number \| string`			Positive integer number of equal-width columns or a full CSS `grid-template-columns` value. Numeric values render as `repeat(<columns>, 1fr)`.
`gap`	`text`			Uniform row and column gap.
`rowGap`	`text`			Row gap override. Wins over `gap` for rows.
`columnGap`	`text`			Column gap override. Wins over `gap` for columns.
`minItemWidth`	`text`			Minimum item width for an intrinsic auto-fill grid. When present, this takes precedence over `columns`.
`as`	`NonVoidHTMLElementTagName`	`'div'`		Rendered HTML tag.
`children`	`snippet`		req	Grid contents.