Layout & type

How boxes are placed, and how text is set: in any direction, in any script, in any colour space.

Grid and subgrid

The cards share their parent's rows through subgrid: titles, texts and footers line up across cards, whatever their length.

Grid

Rows and columns at once.

Subgrid, a longer title that wraps

Children take part in their grandparent's tracks, so siblings align.

Flexbox

One dimension, distributing space along a line, wrapping when it must, and centring at last.

header

aside

main

footer

Container queries and :has()

The cards query their container's width, not the window's. Make it narrower:

Grid

Two dimensions, named areas, and gaps.

Select

Container queries

Components that adapt to where they are.

Select

:has()

A selected card is outlined, by a parent selector.

Select

Logical properties

The quote is styled with margin-inline-start, border-inline-start and padding-inline: switched to a right-to-left direction, it mirrors itself.

Style the start and the end, not the left and the right, and the layout follows the language.

التخطيط يتبع اتجاه اللغة.

Vertical Japanese

writing-mode: vertical-rl, with ruby for readings and upright numbers (text-combine-upright).

縦書きの見本

日本語は縦たてにも横よこにも書けます。ウェブでも、書字方向しょじほうこうを変えるだけで、右から左へ行が進む縦組みになります。

令和8年10月9日、富士山ふじさんの高さは3776メートルです。

Typography

A heading that wraps onto a second line, unbalanced

A heading that wraps onto a second line, balanced

text-wrap: balance

A long paragraph clamped to three lines: it goes on to say more than fits, about how browsers lay out text, measure lines, and add an ellipsis where the last line is cut, which this sentence demonstrates by being far too long for the space it has.

line-clamp: 3

1,111.118,888.88

font-variant-numeric: tabular-nums

Initial letters lift the start of a paragraph, as books have done for centuries; the browser sizes and sinks them to fit the lines.

initial-letter

Colour

OKLCH keeps lightness even across hues; color-mix() blends in a chosen space; light-dark() picks per colour scheme.

sRGB OKLCH HSL

light-dark()

Motion

Red

Amber

Green

Cyan

Blue

Violet

Pink

Scroll-snapped strip above · keyframes here · the bar at the top follows the scroll

In a panel

The bar at the top of the page follows the scroll (a scroll-driven animation).
Infinite animations keep the panel capturing frames while they run.