Study · CSS · Layout
Layout primitives in CSS
Decorated gaps and reading order. Let layout describe how a composition should be read.
A layout has both a visible arrangement and a path through its content. These experiments let CSS describe each one directly, while the markup remains useful in its source order.
Give the gaps a job
Gap decorations draw row and column rules inside existing CSS Grid gaps. They organize the space between items without adding separator elements or changing the grid tracks.
Let visual order guide reading
When a responsive layout changes the order that items appear, reading-flow can keep keyboard and assistive-technology navigation aligned with that arrangement. Switch between rows and columns, then use Tab to follow the cards. The numbers are deliberately displayed in reverse source order, so the change in keyboard order is easy to check.
Reading order follows the rows.
When each region owns its layout and its reading order, the browser can rearrange a composition without making its structure harder to follow.