DevExamples

CSS Layout

This topic holds the geometry questions that come up on every page: centring a box without wrapper markup, building a card grid that reflows from one column to four without media queries, keeping a sidebar beside scrollable content, pinning a header while a table body moves, and choosing between flex and grid for the same visual result. Examples list the markup they expect and the viewport range they were checked across, including narrow phone widths and 200 percent zoom. Use the task groups to separate arranging boxes from defining the tokens those boxes consume, then read each caveat for the containing-block and stacking-context rules that cause otherwise correct-looking layouts to break in one browser.

In scope: Include examples where arrangement, sizing, stacking, or positioning is the primary question. Out of scope: Exclude colour and typography work that does not change geometry.

10 published examples across 4 primary task groups. Read the group heading to find the task you are solving, then pick the Example whose assumptions match your page.

Build a responsive layout

4 examples

Arrange boxes so the design holds across viewport widths, zoom levels, and content growth.

Create CSS design tokens

2 examples

Express reusable colour, spacing, and focus values through custom properties and the cascade.

Observe element visibility

1 example

React to intersection, viewport entry, or document visibility changes.

  • Lazy-load images with IntersectionObserver

    Swap a placeholder image for the real file only when the browser is about to show it, and see where the loading attribute the platform already ships is the better answer.

    JavaScriptintermediate

Structure page content

3 examples

Mark up document regions, reading order, and navigation so people and crawlers share one map.

Adjacent navigation