Grid & layout

Our grid principles

Anatomy of the grid

Columns define the structure. Column gutters separate tracks; row gutters separate rows. Margins frame the outside. Composition zones let content span several columns without consuming gutters as content space.

Optimizing column layouts

Compose a full-width element, equal halves, thirds, quarters, or sixths. A primary area can take two thirds while supporting content takes one third. An intentional offset can establish hierarchy, but empty columns must not replace the grid’s margin or component padding.

Breakpoints, gutters, and density

The source specifies four columns below 800px, eight from 800px, and twelve from 1200px. Default and compact density have distinct gutters and margins. Compact is this workspace’s starting point; density changes whitespace, never permission to shrink essential touch targets or clip text.

The source provides numeric rules for default and compact density. Additional density modes need explicit values before becoming part of the token contract.

Columns and rows

Columns and rows establish a repeatable visual rhythm. A fluid grid partitions the available space; a fixed grid repeats controlled dimensions.

Density mode shifts

Default density provides more room between content zones. Compact density reduces gutters and margins for information-rich work. It does not reduce the readable text size or required pointer target area.

Fluid layouts and fixed composition

A fluid application grid uses available container width and changes track size as the container changes. Fixed compositions are useful for controlled specimens or exports, but must not impose a desktop width on the product. Use a maximum content width where reading comfort matters and let surrounding margins absorb extra space.

Panels, rails, and available space

At 1280px and wider, persistent panels reduce the grid’s available width. Below 1280px, the source calls for panels to overlay the content. The left panel holds primary functions; the right panel holds secondary tools or context. Keep a gap between panels and the grid equal to the active margin.

The four documented combinations are a collapsed left rail with an expanded right panel, both panels expanded, a left rail alone, and a left panel alone. Floating overlays do not resize the grid. Unlike the source’s hover-only examples, this implementation guidance requires click and keyboard activation too.

Panel and rail combinations

A persistent rail or panel subtracts its width from the available content area. Keep the gap between it and the grid equal to the active outer margin. Below 1280px, panels overlay the content instead of shrinking an already narrow layout.

Floating overlays

Menus, tooltips, and transient panels float above the grid. They do not move the content behind them. Essential controls must also work by click and keyboard; a hover-only interaction is insufficient.

Implementation and reflow

Use CSS Grid for the scaffold and independent layout rules inside each composition zone. Set min-width: 0 on flexible children. Test 320px, each breakpoint boundary, both density modes, long translated strings, and browser zoom. Horizontally scroll genuinely two-dimensional data tables within their own labeled region.

.layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; }
@media (min-width: 50rem) { .layout { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; padding: 12px; } }
@media (min-width: 75rem) { .layout { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 16px; } }