Responsive Design: Intrinsic Layout Before Breakpoints
Responsive design adapts content and interaction to available space and capabilities.
- Author
- absequ
- Published
- Updated
- Category
- Responsive design
- responsive design
- responsive design
- practical guide
Responsive design adapts content and interaction to available space and capabilities. It is not a collection of separate screenshots for named devices. A strong baseline uses normal flow, flexible media and intrinsic sizing, then introduces layout changes where the content needs them.
On this page
The mental model
Distinguish layout placement from the internal measure of content. A block may occupy half of a grid while using that entire cell, or it may intentionally keep a narrower internal measure. Hidden default max-width rules can create empty space even when the grid assignment is correct.
Grid rows normally size to their content. Side-by-side items share the height of the tallest item in their row; the browser does not know the author's preferred editorial balance. Pair related content with compatible lengths, and do not introduce fixed text heights or dense packing merely to eliminate every visible gap.
A practical workflow
Begin with a logical single-column document order. Use Grid or Flexbox to place related items together when there is sufficient room. Make width constraints explicit and let long text wrap. Set a zero minimum inline size on grid children when an unbreakable descendant might otherwise force overflow.
Add media queries only after testing where the arrangement becomes uncomfortable. A sidebar might become a disclosure or move below content rather than disappear. Keep keyboard order and screen-reader order coherent with the visible flow, especially when explicit column positions are supported by content data.
Worked example
.article-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
.article-block { grid-column: span 12; min-inline-size: 0; }
.article-block img { max-inline-size: 100%; block-size: auto; }
.article-block pre { overflow-x: auto; }
@media (min-width: 75rem) {
.article-block[data-layout="half"] { grid-column: span 6; }
}The example uses twelve internal columns but defaults every block to the full row. It changes a supported placement hint rather than guessing layout from block type. A diagram and explanation can share columns, while code keeps a full-width panel with internal scrolling. The breakpoint is illustrative; use the application's existing conventions when integrating the pattern.
Test real content, not just equal-height placeholder cards. Include long headings, a table, a code line, a portrait image and a failed media load. Verify layout immediately below, at and above each relevant transition, because off-by-one assumptions can leave a narrow interval with unintended placement.
Failure modes and security
CSS visual reordering can create confusing tab sequences even when the page looks balanced. Dense grid auto-placement may backfill earlier holes and contradict the content sequence. Prefer forward placement and preserve the DOM order as the reading order.
Hiding horizontal overflow at the page root can conceal unreachable controls or cropped text. Repair the responsible component instead. Respect reduced motion, text enlargement and light/dark contrast, and check fixed headers against the usable viewport rather than adding arbitrary top margins until a screenshot looks acceptable.
Practice and verification
Create a mixed article section with prose, code and media. Start with full-width stacking, then configure one meaningful two-column pair. Check its bounding boxes, text order and page scroll width at 390, 768 and 1440px and around the actual breakpoints. Make one block intentionally narrow and verify that its grid span remains unchanged. Explain which constraints belong to the grid and which belong inside the block.
References
MDN responsive design — MDN
Responsive design basics — web.dev
CSS Grid — MDN