# Layout
Structure pages with the width container, main wrapper and column grid.
Layout classes are page scaffolding, not components: they only decide how
regions of a page occupy space. They ship in the design system CSS; there are
no React wrappers, so use the classes directly in any framework.
## Grid presets
The grid is a 12-column CSS grid with a fixed 32px gutter between columns.
Page margins (the space either side of the content) are fluid: they grow
linearly with the viewport from 16px at the mobile frame (375px) to 128px at
the desktop frame (1512px), where the container stops growing and centres.
| Range | Columns | Column gutter | Page margins | Container width |
| ---------------- | ------------------- | ------------- | ------------- | --------------- |
| below 800px | stacked, full width | none | 16px to 58px | fluid |
| 800px to 1023px | 12 | 32px | 58px to 80px | fluid |
| 1024px and above | 12 | 32px | 80px to 128px | max 1512px |
### Mobile (below 800px)
Every column stacks to full width. Use for phones and small tablets in
portrait.
### Tablet (800px to 1023px)
The 12 columns apply. Use fraction classes to span them; `-from-desktop`
variants still stack here.
### Desktop (1024px and above)
The container caps at 1512px (128px margins + 1256px of content) and centres
on wider screens. `-from-desktop` fraction variants take effect here.
## Breakpoint tokens
Breakpoints are named `@custom-media` queries, inlined at build time by
Lightning CSS. Components reference the names, never the numbers.
| Token | Applies | Grid behaviour |
| ----------- | ------------- | ------------------------------------ |
| `--mobile` | below 800px | columns stack full width |
| `--tablet` | 800px and up | fraction classes take their spans |
| `--desktop` | 1024px and up | `-from-desktop` variants take effect |
The page margin needs no breakpoint at all: it is one clamp,
`clamp(16px, 9.85vw − 1.31rem, 128px)`, which passes through both design
anchors (16px at 375, 128px at 1512) and holds beyond.
## Page scaffold
Put `govbb-page` on the ``: it makes the page fill the viewport and
pins the footer to the bottom when content is short.
Every page wraps its content in the width container, which owns the side
margins, and in the main wrapper, which owns the vertical breathing room and
carries the `main-content` id that a skip link targets. Both classes normally
sit on the same ``:
```html
Page title
```
Split them only when something has to line up with the page column while
sitting outside the `main` landmark — a page-level notice, say. Then the
container is a wrapping `
` and the `` keeps the wrapper:
```html
…
…
```
The header, official banner and footer sit outside the width container and use
it internally for their own content, so they can paint full-bleed backgrounds.
The container centres itself with automatic side margins once the page is wider
than 1512px. Inside the `govbb-page` column that would stop it stretching, so
the stylesheet keeps a direct child of `govbb-page` at full width — you do not
need to set a width yourself.
## Grid columns
```html
Main content
Related links
```
Available fractions: `full`, `three-quarters`, `two-thirds`, `one-half`,
`one-third`, `one-quarter`. Fractions in a row should sum to a whole; a row
with leftover tracks simply leaves trailing space.
Each fraction also has a `-from-desktop` variant (for example
`govbb-grid-column-one-third-from-desktop`) that stays full width through
tablet and only takes its fraction on desktop. Use it when a sidebar is too
cramped at tablet widths.
Rows nest: a `govbb-grid-row` inside a column starts a fresh 12-column grid
scoped to that column's width.
## When to use the grid
Use the grid whenever a page places content side by side: a main column with
a sidebar, cards in halves or quarters, or a form constrained to two-thirds so
line lengths stay readable.
Do not use the grid for spacing inside a component: components own their
internal layout. Do not nest grids more than one level deep; if a layout needs
that, simplify the page instead.