CSS Layout Design Patterns

What You Learn From This Page

• How reusable layout patterns describe relationships rather than fixed coordinates.
• How to choose normal flow, Flexbox, Grid, or positioning for a requirement.
• How to build containers, stacks, clusters, split layouts, sidebars, and page shells.
• How responsive card grids use auto-fit, auto-fill, minmax(), and intrinsic sizing.
• How to compose forms, media objects, dashboards, app shells, and editorial pages.
• How media queries and container queries serve different responsive scopes.
• How to preserve reflow, logical DOM order, zoom support, and writing-direction flexibility.

Introduction

Layout design patterns are reusable ways to arrange content according to recurring relationships. A page often needs a constrained center column, a sidebar beside flexible content, a row of actions, a grid of cards, or a header-main-footer shell. Treating each case as a new positioning problem creates duplicated and fragile CSS. Recognizing the pattern makes the implementation simpler and more predictable.

Modern patterns combine normal document flow, Flexbox, Grid, intrinsic sizing, gap, logical properties, fluid functions, media queries, and container queries. The goal is not to use every feature in one component. It is to choose the smallest layout model that accurately describes how the elements relate.

Strong patterns also define failure behavior. They specify how items wrap, how tracks shrink, what happens with long content, when columns stack, and which region scrolls. This article develops a practical pattern language that can be composed across content sites, dashboards, forms, and applications.

Design Relationships, Not Coordinates

A coordinate says that an element starts 320 pixels from an edge. A relationship says that a sidebar has a bounded width, the main area receives remaining space, and a gap separates them. Relationships survive changes in viewport, content, language, and user settings because the browser recalculates them.

Normal flow expresses sequence. Flexbox expresses one-dimensional distribution and alignment. Grid expresses tracks in two dimensions. Positioning expresses independent anchoring or overlap. Begin every layout by identifying which relationship dominates rather than selecting a favorite technology.

Normal Flow First

Headings, paragraphs, lists, sections, and form fields already stack in normal block flow. Later boxes move when earlier content grows, making normal flow naturally resilient to translation, zoom, and dynamic data.

<article>
  <h1>Tutorial title</h1>
  <p>Introduction...</p>
  <section>...</section>
</article>

Do not add Grid or Flexbox when source order and ordinary block behavior already solve the requirement. Add a layout context when alignment, track sharing, distribution, wrapping, or component-level spacing requires one.

The Centered Container Pattern

A centered container stays fluid on narrow screens and stops growing at a readable or design-specific maximum. Logical margins support different writing directions.

.container {
  inline-size: min(calc(100% - 2rem), 75rem);
  margin-inline: auto;
}

The subtraction creates minimum outer gutters, while the maximum prevents excessively long lines and scattered composition on wide displays. Use a content-specific maximum such as 65ch for reading prose and a larger page maximum for grids or application interfaces.

The Single-Column Pattern

A single-column page places header, main content, and footer in sequence, with the main content constrained independently. It suits tutorials, blogs, forms, legal pages, and focused workflows.

.reading-column {
  inline-size: min(calc(100% - 2rem), 70ch);
  margin-inline: auto;
}

The pattern is not simplistic. It reduces navigation effort, supports zoom and narrow viewports, and maintains a readable measure. Rich components can still appear within the column without turning the entire page into a multi-column shell.

The Stack Pattern

A stack arranges children vertically with consistent spacing. It removes repeated child margins and last-child exceptions, while a custom property allows local variants.

.stack {
  --stack-space: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--stack-space);
}

.stack--large { --stack-space: 2rem; }

Use stacks for form fields, card content, settings groups, article modules, and dialog sections. Nested stacks are reasonable when each level owns a meaningful spacing rhythm.

The Cluster Pattern

A cluster groups inline-like items that may wrap, such as tags, actions, filters, metadata, or navigation links. Flexbox expresses alignment, wrapping, and gap without assumptions about item width.

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

A cluster differs from a grid because items retain content-driven widths. When every item should share equal tracks, use Grid instead.

The Header-Main-Footer Shell

A page shell with a flexible middle track keeps the footer at the viewport bottom on short pages and after content on long pages. No absolute positioning is needed.

body {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Dynamic viewport units account more directly for changing mobile browser chrome than traditional vh, though the complete mobile experience still requires testing. The content remains in flow and can extend the page naturally.

The Navigation Bar Pattern

A navigation bar is primarily one-dimensional: brand, link group, and actions share a row. Flexbox aligns them and distributes free space.

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

On narrow screens, wrapping may be enough, or the navigation may need a structural menu pattern. Preserve meaningful DOM order and keyboard access rather than visually reversing controls.

The Toolbar Pattern

Toolbars combine related controls, optional wrapping, and an action group aligned to the far inline edge. An automatic margin consumes free space before the final group.

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.toolbar__actions {
  margin-inline-start: auto;
}

If wrapping puts the actions in an awkward location, switch to Grid or give the action group a full-row responsive state. Patterns should describe usable behavior, not merely prevent overflow.

The Two-Column Sidebar Pattern

A sidebar beside flexible content is naturally modeled as Grid. The main track uses a zero minimum so long intrinsic content cannot silently force the grid wider.

.sidebar-layout {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 2rem;
}

Use this for documentation, product filters, administration, or navigation. The sidebar width can be fixed, bounded with minmax, or content-based. Always test long links and labels before choosing an intrinsic width.

Responsive Sidebar Stacking

Start with one column and introduce the sidebar track when enough space exists. This mobile-first sequence keeps the baseline simple.

.sidebar-layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 50rem) {
  .sidebar-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

The breakpoint should come from the content's minimum useful widths, not a particular device name. If the component appears in containers of different sizes, a container query may express the transition more accurately.

The Three-Column Pattern

Portals, documentation, and complex work surfaces may place a primary article between navigation and contextual content.

.three-column {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr) 16rem;
  gap: 2rem;
}

Three columns need a deliberate collapse strategy. Secondary regions may stack, become drawers, or move below the main content. Keep DOM order meaningful when the visual arrangement changes.

The Holy Grail Page Pattern

The traditional holy grail combines a full-width header and footer with a flexible center column and two sidebars. Grid areas make the structure explicit.

.page-shell {
  min-block-size: 100dvh;
  display: grid;
  grid-template:
    "header header header" auto
    "left main right" 1fr
    "footer footer footer" auto /
    15rem minmax(0, 1fr) 15rem;
}

Named areas improve readability, but the source still needs a logical sequence. Define a narrow-screen template that avoids relying on visual reordering to repair poor markup.

The Split Layout Pattern

A split places text beside media, a preview beside controls, or two complementary panels in balanced tracks.

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 5vw, 3rem);
}

Stack the tracks when either side reaches its minimum useful width. Do not assume equal tracks are always correct; an illustration may need a bounded track while text receives the remainder.

The Media Object Pattern

The media object places a small intrinsic item such as an avatar beside flexible content. The zero-minimum content track handles long words and nested controls.

.media-object {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

This pattern serves comments, notifications, profile summaries, and article previews. Add a third auto track for a trailing action when needed.

The List Item Pattern

A structured list row often has a leading icon, flexible main content, and a trailing action. Grid keeps those tracks aligned across variable content.

.list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

At narrow widths, the action may move to a second row or remain icon-only with an accessible name. Avoid shrinking the primary content until it becomes unreadable.

The Card Pattern

A card commonly stacks media, title, description, metadata, and actions. A flex column provides internal rhythm and allows the action group to move toward the block end without leaving flow.

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.card__actions {
  margin-block-start: auto;
}

Avoid fixed card heights when content is unpredictable. Grid rows can create equal-height cards, while the internal flex pattern aligns actions safely.

The Responsive Card Grid

Auto-repeat and minmax create a card grid that chooses its column count from available width.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.5rem;
}

The nested min prevents the minimum track from exceeding a very narrow container. This pattern often removes several media queries while preserving a real minimum card width.

auto-fit vs auto-fill

Both keywords repeat as many tracks as fit. After placement, auto-fit collapses empty repeated tracks so occupied tracks can expand into the released space. Auto-fill retains the possible track slots even when some remain empty.

Auto-fit is often intuitive for variable card counts because existing cards stretch across available room. Auto-fill is useful when maintaining an implicit slot structure matters. Test sparse as well as full collections because the difference appears most clearly when the row has unused capacity.

The Feature Grid and Metric Grid

Features and dashboard metrics use the responsive card-grid principle with different minimums. Metrics may tolerate compact tracks, while explanatory features need wider reading measures.

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1rem;
}

Choose the minimum from the component's real content. A generic 12rem copied everywhere can create cramped translated labels or excessive columns.

The Bento Grid Pattern

A bento layout uses a regular grid with selected items spanning multiple tracks. It creates visual hierarchy for dashboards or feature showcases.

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.bento__featured {
  grid-column: span 2;
  grid-row: span 2;
}

Define narrow-screen spans carefully so no item creates overflow or confusing reading order. Visual emphasis should not make the DOM sequence illogical.

The Gallery Pattern

A uniform gallery uses responsive grid tracks and aspect-ratio to keep image cells stable.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 0.75rem;
}

.gallery img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

Use meaningful alt text and choose crops that preserve the subject. Reserve variable-height column layouts for content where column reading order remains acceptable.

Masonry-Like Columns

CSS multi-column layout can approximate masonry by flowing items down one column before continuing into the next. That flow order may not match the left-to-right visual scan users expect.

.masonry-like {
  columns: 3 16rem;
  column-gap: 1rem;
}

.masonry-like > * {
  break-inside: avoid;
  margin-block-end: 1rem;
}

Use it for suitable editorial or image collections, not interactive card sequences where keyboard and visual order must align predictably.

The Form Stack Pattern

A vertical form remains the most resilient default. The form and each field group can use Grid solely for consistent gaps.

.form,
.form-field {
  display: grid;
}

.form { gap: 1rem; }
.form-field { gap: 0.5rem; }

Labels, controls, help, and errors stay in source order and in flow. Dynamic messages push following fields instead of overlapping them.

The Two-Column Form Pattern

Related short fields can share columns on wider containers while long fields span all tracks.

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-grid__wide { grid-column: 1 / -1; }

Collapse to one column before labels or controls become cramped. Do not place fields side by side merely to reduce page height; preserve a logical completion sequence.

The Label-and-Control Pattern

A horizontal form row uses a label track and a flexible control track when labels are predictable and comparison across rows is valuable.

.form-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: start;
}

Stack labels above controls on narrow screens and for languages with long labels. Validation and help content should remain associated with the control track.

The Search Bar Pattern

A search field consumes remaining inline space while its submit button keeps its intrinsic width. The input's minimum must allow it to shrink.

.search-bar {
  display: flex;
}

.search-bar input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.search-bar button { flex: 0 0 auto; }

Use a visible label or an equivalent accessible name. Decide whether the control group wraps or changes structure when space becomes very narrow.

The Input Icon Pattern

An icon inside a control is a genuine overlay, so a relatively positioned wrapper and absolute icon are appropriate.

.input-wrapper { position: relative; }

.input-wrapper input {
  inline-size: 100%;
  padding-inline-end: 3rem;
}

.input-wrapper__icon {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}

The input padding reserves text space, while logical insets support RTL layouts. Decorative icons should not intercept pointer events or replace a necessary text label.

The Modal Pattern

A modal backdrop attaches to the viewport, while Grid centers a bounded dialog. This is a justified use of fixed positioning.

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal {
  inline-size: min(100%, 40rem);
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
}

Geometry is only part of a modal. Implement focus management, labeling, Escape behavior, background inertness, and scroll restoration, or use native dialog behavior where appropriate.

The Drawer Pattern

A drawer is a viewport-attached panel that enters from an inline edge. Logical insets support both writing directions.

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(90vw, 24rem);
  overflow-y: auto;
}

Pair it with an accessible open and close interaction, focus management, and a backdrop when modal. Do not use the overlay state as the desktop sidebar layout if Grid can express that state more simply.

The Full-Screen App Shell

An application shell often keeps a header visible while the main region owns scrolling. The minimum zero track is essential because an auto minimum may preserve content height and prevent the inner scroller from shrinking.

.app {
  block-size: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.app__main { overflow: auto; }

This pattern suits work applications, not ordinary reading pages that should use document scrolling. Test keyboard reachability and avoid deeply nested scroll regions.

The Dashboard Shell

A desktop dashboard combines a sidebar track and a flexible main area. The main area can contain its own header, filters, metrics, and data regions.

.dashboard {
  min-block-size: 100dvh;
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.dashboard__main {
  min-inline-size: 0;
}

At small sizes, convert navigation to a normal block or drawer and let the main content occupy the full track. Do not shrink a complex desktop shell until every region becomes unusable.

The Split Pane and Master-Detail Patterns

A split pane gives two work surfaces flexible space, while master-detail usually gives a bounded list track and flexible detail track.

.master-detail {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
}

On small screens, show list then detail as separate states or stacked regions. Preserve navigation history and focus when users move between them rather than merely squeezing both panes into narrow columns.

The Content-and-Aside Pattern

An article may pair a readable content track with a compact table of contents or related-links aside.

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 65ch) 16rem;
  justify-content: center;
  gap: 3rem;
}

The aside can become sticky when it is shorter than the viewport and persistent context is valuable. Stack it when space is limited and keep source order logical for linear reading.

The Full-Bleed Editorial Pattern

A three-track article grid constrains ordinary content while allowing selected media to span the wider page.

.article {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.article > * { grid-column: 2; }
.article > .full-bleed { grid-column: 1 / -1; }

Add page gutters around the grid so full-bleed content does not touch the viewport unintentionally. This pattern is effective for editorial figures, diagrams, and tables.

The Cover and Empty-State Pattern

A cover fills at least the viewport and centers a concise primary experience such as login, onboarding, or an empty state.

.cover {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
}

Minimum height allows the section to grow when content or the virtual keyboard requires more space. Avoid fixed height when clipping would make form controls inaccessible.

Fluid Spacing and Layout Tokens

Custom properties centralize page maximums, gutters, and section rhythm. Clamp can interpolate within deliberate limits.

:root {
  --page-max: 75rem;
  --content-max: 65ch;
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-space: clamp(2rem, 6vw, 6rem);
}

.page-section {
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
}

Tokens make patterns consistent, but names should describe design roles rather than arbitrary numbers. Components can expose local spacing variables without depending on global selectors.

Media Queries vs Container Queries

Media queries respond to the viewport or user environment and are appropriate for page-level structural changes. Container queries respond to an ancestor's size or style, making a reusable component adapt to the space where it is placed.

.card-wrapper {
  container: card / inline-size;
}

.adaptive-card {
  display: grid;
  gap: 1rem;
}

@container card (inline-size >= 30rem) {
  .adaptive-card {
    grid-template-columns: 10rem minmax(0, 1fr);
  }
}

The queried container must be an ancestor of the styled descendant. Use named containers when nested layout contexts could otherwise select the wrong ancestor.

Mobile-First and Fluid-First Composition

Mobile-first patterns begin with the simplest narrow layout and add columns when content has room. Fluid-first patterns first try percentages, fractional tracks, wrapping, minmax, auto-fit, and clamp before introducing a breakpoint.

Neither approach eliminates media queries. A breakpoint remains correct when information architecture changes, such as a navigation becoming a drawer or a split workflow becoming sequential. The key is to use breakpoints for structural changes rather than every small spacing adjustment.

Composition Over One-Off Hacks

A design system can compose container, stack, cluster, grid, sidebar, and center primitives rather than inventing a unique layout for every page. A card grid may be a container containing a stack heading and a responsive Grid; each primitive owns one clear relationship.

Avoid abstracting every three-line rule prematurely. A primitive is valuable when it represents a repeated behavior, removes meaningful duplication, and has a stable contract for content and responsiveness.

Composing a Landing Page

A landing page can combine the page-shell, container, stack, split, cluster, and responsive-card patterns without creating one large layout context. The header owns its navigation row, each page section owns vertical padding, and each section contains a centered width constraint. The hero may use a split grid, while features use an independent auto-fit grid.

.landing-section {
  padding-block: var(--section-space);
}

.landing-section__inner {
  inline-size: min(calc(100% - 2 * var(--gutter)), var(--page-max));
  margin-inline: auto;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 2rem;
}

This composition keeps section behavior independent. A testimonial list does not inherit the hero's columns, and the call-to-action can use a simple stack. Shared tokens create consistency without forcing unrelated content into one universal grid.

Composing Documentation

A documentation page often combines primary navigation, a readable article, and an optional table of contents. Start with logical DOM order, place the regions in a three-column grid on wide screens, and collapse them according to their importance. The article should retain a readable measure even when the page shell has substantial available width.

.docs-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 65ch) 14rem;
  justify-content: center;
  gap: 2rem;
}

.docs-layout__aside {
  position: sticky;
  inset-block-start: 1rem;
  align-self: start;
}

Sticky behavior is optional and should apply only when the aside is compact enough to remain useful. On smaller screens, navigation may become a drawer and the table of contents may move into the article flow. The content itself should continue to use document scrolling rather than an unnecessary inner scrollport.

Composing an E-Commerce Results Page

A commerce results page combines a filter sidebar, toolbar, product grid, pagination, and feedback states. Grid handles the sidebar-content relationship, the toolbar uses a wrapping cluster or flex row, and products use an auto-fit grid. Loading, empty, and error states occupy the same main region rather than requiring separate page coordinates.

.shop-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1.5rem;
}

At narrow widths, filters can enter the normal flow or open as an accessible drawer. The product grid should respond to its actual content width, not the full viewport. This distinction becomes important when the same results component appears with or without a sidebar.

Common Anti-Patterns

Positioning-based page shells, float-based columns, fixed-width containers, fixed-height cards, and child margins used as row gutters all encode accidental dimensions. Modern flow, Flexbox, Grid, and gap describe the intended relationship directly.

Other problems include selecting Flexbox for every layout, selecting Grid for every layout, nesting contexts without a reason, adding many narrow media queries, and ignoring intrinsic minimum sizes. The right pattern is the smallest one that owns the relationship and its failure states.

Intrinsic Sizing Safeguards

Long content can force Flexbox and Grid wider than expected. Set min-inline-size: 0 on a flex item that must shrink, and use minmax(0, 1fr) for a grid track that may shrink below its automatic minimum.

These are not blanket reset rules. Preserve intrinsic minimums when they protect readability or controls. Pair zero minimums with a deliberate wrapping, truncation, or localized scrolling strategy.

Accessibility and Logical Order

Grid and Flexbox can change visual placement without changing DOM, speech, or sequential navigation order. Use visual reordering only when it does not alter logical meaning. Important content and controls should generally appear in the DOM order users are expected to read and operate them.

Patterns should tolerate larger fonts, browser zoom, long translation, keyboard navigation, and narrow viewports. Use logical properties such as margin-inline, padding-block, and inset-inline-end so spacing and anchoring adapt to writing direction.

Layout Pattern Selection Guide

Debugging a Pattern

When a pattern fails, inspect the container's available size, layout context, track or flex rules, item minimums, overflow, content length, and active responsive conditions. Find the first ancestor whose constraints no longer match the content.

Do not immediately add absolute positioning or global overflow hiding. Use browser layout overlays, toggle suspicious declarations, and test the exact width where the transition begins. The fix is usually a false minimum, a non-wrapping child, a missing zero minimum, or a breakpoint chosen without content constraints.

Common Interview Questions

What are CSS layout design patterns? They are reusable structures for recurring arrangements such as containers, stacks, sidebars, cards, forms, page shells, and dashboards.

When should Flexbox be used? Use it when the primary relationship is one-dimensional, such as a row, column, toolbar, button group, or wrapping cluster.

When should Grid be used? Use it when tracks in rows and columns, explicit placement, or shared alignment across two dimensions are central.

How does a responsive card grid work? Auto-repeat creates as many tracks as fit, minmax defines their useful range, and auto-fit can collapse empty tracks so occupied cards expand.

Why use container queries? They let a component adapt to its own containing space instead of assuming that viewport width predicts the space available inside every placement.

Practical Review Checklist

• Start with normal flow and add a layout context only for a clear relationship.
• Use Flexbox for one-dimensional distribution and Grid for shared tracks.
• Constrain page width while preserving fluid gutters on small screens.
• Use gap for container-owned spacing instead of repeated child margins.
• Choose card and column minimums from real content requirements.
• Use auto-fit or auto-fill intentionally and test sparse collections.
• Allow dynamic content height and keep essential content in flow.
• Apply zero minimums only with a wrapping, clipping, or scrolling strategy.
• Use media queries for page structure and container queries for component context.
• Keep DOM, reading, and focus order meaningful across every arrangement.
• Use logical properties so patterns adapt to writing direction.
• Test long content, translation, zoom, keyboard use, and narrow containers.
• Compose a small vocabulary of stable primitives instead of one-off hacks.
• Debug constraints before adding breakpoints or positioning overrides.

Key Takeaway

Modern layout becomes easier when recurring arrangements are treated as patterns. Normal flow handles sequence, stacks handle vertical rhythm, clusters handle wrapping groups, Flexbox handles a primary axis, Grid handles shared tracks, positioning handles overlays, and container queries handle reusable component adaptation.

The most important principle is to design relationships rather than coordinates. When CSS describes how elements share space, wrap, shrink, align, and change structure, the browser can preserve that intent as content, language, viewport size, and user settings change. A small, composable pattern vocabulary produces more resilient pages than a large collection of isolated corrections.