Grid layout
Configurable column grid with a built-in visualization layer — column tracks tinted, gap tracks left bare, hairlines bordering each. Opt into bleed-mark chrome (vertical rules at the outer edges + four corner registration marks + optional vertical margin labels) for editorial framing. Slot children become grid items; position them with grid-column.
Default — 12 columns, 1rem gap
The vanilla configuration: 12 equal-width columns with a 1rem gap between each. Column tracks carry a faint ink tint; gap tracks are transparent so the page background reads through. Hairlines border every column on both sides — so every gap is framed by two parallel lines.
With bleed marks + margin labels
Editorial framing: vertical hairline rules on the outer edges, crosshair marks at the four corners, and optional mono-caps margin labels in the side gutters. Same vocabulary as DSSection's `bleed` prop, scoped to the grid frame.
Adjustable column count + gap
Both `columns` and `gap` are props. Drop to a wider 6-column grid with a generous 2rem gap when content needs more breathing room — long-form essay layouts, pricing tables, picture-grid editorials.
Tinted gap track
Pass a `gapTint` to color the gap tracks. Useful when you want the grid structure to read as a strong visual — a printer's column rule motif, with gaps as the negative space between.
Overlay off
Set `showOverlay` to false to drop the visualization layer. Use when the grid is pure structure (real production layout) and the column tints would compete with content.