Layout

Grid

CSS grid container for explicit columns, intrinsic auto-fill layouts, and two-dimensional placement.

import { Grid } from '@lostgradient/cinder/grid';
layoutgrid
01

Overview

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

Usage

svelte 
<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:

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

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
03

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.

Feature grid

A product-features section recipe: Grid with minItemWidth lays out icon + title + description tiles under a section heading.

Logo cloud

A trusted-by strip recipe: Grid auto-fills brand wordmarks under a heading, muted onto the subtle text ramp. Swap the wordmark spans for your real logo images.

Narrow collapse

With narrowCollapseEnabled, Grid falls back to a single column and resets item placement once its own width is 48rem or less.

04

Props

Props for grid
NameTypeDefaultDescription
columns number 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.
narrowCollapseEnabled boolean false Enables a single-column fallback when the Grid element's border-box width is 48rem or less and resets direct Grid.Item placement to auto flow.
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 required snippet Grid contents.