The grid
Two ways to lay tiles out. The automatic grid fits as many columns as it can — zero configuration. The configured grid gives you 12 columns on wide containers and 6 on narrow ones, and every tile declares its own width.
Two modes
Automatic — .sites-grid
repeat(auto-fit, minmax(300px, 1fr)). No breakpoints, no column maths. Perfect for rows of equal cards.
Configured — .sites-grid--cols
A 12-column grid (6 when narrow) where each tile says how wide it is with data-span. For deliberate layouts.
Automatic
…
…
…
Live: three of twelve
What you see below
Real tiles with data-span, not a picture. Resize the window and watch the tiers switch.
data-span="4"
A third of the wide grid. On the narrow tier this is full width.
data-span="4"
Three of these fill one deliberate row.
data-span="4"
Change one number and the whole row rearranges.
data-span="8"
Two thirds. Pair an 8 with a 4 for an asymmetric row.
data-span="4"
The narrow companion to the 8 above.
narrow 1
data-span-sm="2" — three across even on a phone.
narrow 2
The same tile also declares data-span="4" for the wide tier.
narrow 3
Two numbers, two screen sizes, no media queries in your code.
Configured
one third
one third
one third
two thirds
one third
half on a phone, one third on desktop
Spans
data-span="4"
Three across on the wide tier. Any whole number from 1 to 12.
data-span="8"
Two thirds — pair it with a 4 for a classic asymmetric row.
data-span-sm="2"
Three across on the narrow tier too (spans of the 6-column narrow grid).
no data-span
Full width, one tile per row. The safe default.
Alignment
.sites-grid--start
Tiles size to their own content instead of stretching to equal heights.
.tile--center
Centres a tile's text and its button row.
.tile--end
Pushes text and buttons to the end (right in a left-to-right language).
bottom-aligned buttons
Buttons in cards, pricing tiers and products sit on the row baseline automatically, however much copy the neighbours carry.
Configure it, or leave it alone
Most sites never need data-span. Reach for the configured grid when a row should be deliberately uneven.