Layouts on Socle

Overview

Mon, 01 Jan 0001 00:00:00 +0000

@layer layouts ships three primitives. They are deliberately few: everything else is a component’s job.

Page	Class	Role
Container	`.container`	Centred wrapper with a responsive max-width and a gutter
Grid	`.grid`	CSS grid whose column count follows the breakpoint
Row	`.row`	Flex wrapper with proportional column modifiers

All three read the responsive column count and gutter from tokens, so a project changes its grid by changing tokens rather than by rewriting layout rules.

Container

Mon, 01 Jan 0001 00:00:00 +0000

A centred wrapper with a responsive max-width and a gutter on both sides.

<div class="container">...</div>

.container {
 --container-bleed: var(--container-bleed-mobile);
 margin-inline: auto;
 max-width: var(--container-max-width, var(--container-max-width-mobile));
 padding-inline: var(--gutter);
 width: 100%;
}

Property read	Role
`--container-max-width-*`	Max-width per breakpoint rung
`--container-bleed-*`	Bleed allowance per rung, the paired token
`--gutter`	Inline padding

Each breakpoint reassigns both --container-max-width and --container-bleed together, at --tablet, --tablet-wide, --laptop and --desktop.

It also publishes one property of its own, --container-bleed.

The `--container-bleed` contract

--container-bleed says how far a child may pull out of the container to reach the edge of the screen.

Grid

Mon, 01 Jan 0001 00:00:00 +0000

A CSS grid wrapper whose column count follows the breakpoint.

<div class="grid">
 <div>...</div>
 <div>...</div>
</div>

.grid {
 --columns: var(--columns-mobile, 1);
 display: grid;
 grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
 gap: var(--grid-gap, var(--gap));

 & > * {
 grid-column: var(--grid-column);
 }
}

Property read	Role
`--columns-mobile` … `--columns-desktop`	Column count per rung, falls back to `1` on mobile
`--grid-column-tablet` … `--grid-column-desktop`	The span each child takes, per rung
`--grid-gap`	Gap, falls back to `--gap`

At each breakpoint the grid reassigns both --columns and --grid-column, so the track count and the default span move together.

Row

Mon, 01 Jan 0001 00:00:00 +0000

A flex wrapper, stacked on mobile and turning into a row at the --tablet breakpoint and above.

<div class="row">
 <div class="col-small">...</div>
 <div class="col-small">...</div>
</div>

.row {
 --columns: var(--columns-mobile, 1);
 display: flex;
 flex-direction: column;
 gap: var(--grid-gap, var(--gap));

 > * {
 min-width: 0;
 }
}

@media (--tablet) {
 .row {
 flex-direction: row;
 flex-wrap: wrap;
 }
}

.row mirrors the grid’s responsive column count into its own --columns, so .col-* resolves against the same tracks as .grid. A row and a grid placed side by side line up.

Layouts on Socle

Overview

Container

The --container-bleed contract

Grid

Row

The `--container-bleed` contract