Responsive Design
This tag collects examples that have to survive a change of width. Intrinsic grids that add columns without a media query, sidebars that collapse into a single flow, sticky headers that stay aligned when text scales, and images that reserve space before they load are all grouped here. Each page records the viewport range and the zoom level checked, along with the reflow rule that keeps content visible at 320 CSS pixels. Use the task groups to compare arranging boxes with defining the tokens they read, then follow the relationships into the markup examples that give those components their structure.
This is a controlled cross-cutting tag: it groups Examples that share one facet, not a bounded topic. In scope:Include when the example was verified at narrow and wide viewports or under 200 percent zoom. Out of scope: Exclude fixed-size visual tweaks that do not change behaviour across viewports.
6 published examples.
Build a responsive layout
4 examplesArrange boxes so the design holds across viewport widths, zoom levels, and content growth.
Build a card grid that reflows without media queries
Declare one minimum card width, let the grid count how many tracks fit, and a row of cards reflows from four columns to one with no media query at all.
Centre an element with flexbox and no wrapper markup
Centre one element on both axes with flexbox by giving the container a size to centre against, and keep straight which property owns which axis.
Create a two-column layout with a fixed sidebar
Split a page into a 16rem sidebar and a fluid content column with one grid track list, then collapse it to a single column before the content becomes cramped.
Keep a table header visible with sticky positioning
Pin a table header to the top of its own scroll box with position: sticky on the cells, keep borders and backgrounds honest, and avoid the wrapper that silently defeats it.
Observe element visibility
1 exampleReact 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.
Structure page content
1 exampleMark up document regions, reading order, and navigation so people and crawlers share one map.
Structure a page with semantic landmarks
Mark the header, navigation, main, and footer regions so keyboard and screen-reader users can jump between them instead of tabbing through everything.
Adjacent navigation
- Parent: Home
- Related topic: CSS Layout
- Related topic: DOM Events
- Or search: Search examples