Documentation

Documentation

Grid

Twelve-column layout with preset column splits and named column slots.

The <dsgn-grid> component lays content out on a twelve-column CSS grid. Rather than a free column count, it exposes a fixed set of splits (6-6, 7-5, 8-4, 9-3, 4-4-4, 3-3-3-3) so page layouts stay consistent. Content goes into numbered slots — col-1, col-2, and so on — one per column in the chosen split.

Every split collapses to a single column below the lg breakpoint and expands at lg and up.

Usage

<dsgn-grid cols="6-6" gap="lg">
  <div slot="col-1">Left column</div>
  <div slot="col-2">Right column</div>
</dsgn-grid>

Import the component module in your application entrypoint:

import '@ds-gn/ui/grid';

Props

Prop Type Default Description
cols '6-6' | '7-5' | '8-4' | '9-3' | '4-4-4' | '3-3-3-3' '6-6' Column split, expressed as twelve-column spans.
gap 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Gap between columns and rows.
align 'start' | 'center' | 'end' | 'stretch' 'stretch' Cross-axis alignment of the columns (align-items).
reverse boolean false Reverses the visual column order at lg and up without changing DOM order. Applies to two-column splits only.

The prop is cols, and its values are span pairs — not a columns count. Grid paints no background, so it has no surface prop.

Slots

Slot Description
col-1 First grid column.
col-2 Second grid column.
col-3 Third grid column, when the selected split provides one.
col-4 Fourth grid column, when the selected split provides one.

Only the slots the split defines are rendered: cols="6-6" renders col-1 and col-2, and content assigned to col-3 never appears. Content with no slot attribute is not rendered either — every child needs a column.

Examples

Asymmetric two-column layout

<dsgn-grid cols="8-4" gap="lg" align="center">
  <div slot="col-1">
    <dsgn-heading heading-size="h2">Main content</dsgn-heading>
    <dsgn-text>The wider column carries the primary content.</dsgn-text>
  </div>
  <div slot="col-2">
    <dsgn-card><span slot="heading">Sidebar</span></dsgn-card>
  </div>
</dsgn-grid>

Three-column feature row

<dsgn-grid cols="4-4-4" gap="md">
  <dsgn-card slot="col-1"><span slot="heading">Feature one</span></dsgn-card>
  <dsgn-card slot="col-2"><span slot="heading">Feature two</span></dsgn-card>
  <dsgn-card slot="col-3"><span slot="heading">Feature three</span></dsgn-card>
</dsgn-grid>

Four-column grid

<dsgn-grid cols="3-3-3-3" gap="sm">
  <div slot="col-1">A</div>
  <div slot="col-2">B</div>
  <div slot="col-3">C</div>
  <div slot="col-4">D</div>
</dsgn-grid>

Reversed order

<dsgn-grid cols="8-4" reverse>
  <div slot="col-1">Reads first, renders second on wide screens</div>
  <div slot="col-2">Renders first on wide screens</div>
</dsgn-grid>

Accessibility

reverse changes the visual order only. Keep the DOM in reading order so the keyboard and screen-reader sequence still matches the content’s meaning, and avoid using it to reorder anything interactive.

Esc