measuring…

One design, every phone

This column is sqr-w-6 — six finger units, the full canonical width. Resize the window: the whole layout scales as one piece instead of re-flowing.

The finger unit

Every size below is a multiple of 60px — the researched touch-target floor. Nothing built from these units can end up too small to tap.

1
2
3

Scroll snapping

This column snaps vertically card by card. Swipe sideways for the next column — the sliver of it at the screen edge is the affordance, produced by the scale itself.

Second column

Identical construction. On a tablet or desktop the scaler fits a whole number of these columns side by side rather than stretching one.

Half units exist

Fractions like sqr-h-1/2 are for spacing — not for shrinking touch targets below the floor.

Third column

Rotate the device: between 361px and 768px in landscape the canon flips to 720 × 360 and the scaler re-solves.

Board 2 — spanning sections (0.4.0)

Resize past 640px CSS wide (2 × SQR_MIN_COL_PX) to see each section below widen from one macro column to two. Nothing reorders in the DOM either way — only the paint changes. The second row of buttons is the 0.6.0 fit switch — it writes data-sqr-fit on <html> and nothing else. Make the window short and wide to see contain and stack part company from css.

Section A — six cards, one header

This header carries .sqr-row, so it spans both columns in either mode while the six cards below it split across them.

Card 1

Card 2 — a little taller

Card 3

Card 4

Card 5 — the tall one

Card 6

Section B — six cards, one header

Independent from Section A — each spanning section keeps its own grid or column count, sized to its own children only.

Card 1

Card 2

Card 3 — a little taller

Card 4

Card 5

Card 6 — the tall one

Section C — six cards, one header

Try the ceiling: document.documentElement.dataset.sqrMaxCols = '1' in the console forces every spanning section here back to one column.

Card 1

Card 2

Card 3 — the tall one

Card 4

Card 5

Card 6