Layout & Responsive Design

A responsive interface adapts to available space. It is not simply a desktop interface scaled down until the text becomes small. The document needs to remain readable when columns collapse, text grows, and controls wrap.

The examples use an exhibition guide. Its entries have titles, descriptions, and links to visiting information. The schedule exercise transfers the same layout reasoning to a different collection.

Each preview contains its own HTML and styles. Compare the browser views and inspect them with the browser’s developer tools.

Normal document flow

A list of articles already has a useful default behavior: block elements follow one another. Before introducing a layout system, check that the document works in this simple form.

<main class="exhibitions">
<h1>Exhibition guide</h1>
<div class="entries">
  <article>
    <h2>Tools of navigation</h2>
    <p>Maps and instruments.</p>
    <a href="#visiting">Visit Tools of navigation</a>
  </article>
  <article>
    <h2>Paper archives</h2>
    <p>Documents from the city.</p>
    <a href="#visiting">Visit Paper archives</a>
  </article>
  <article>
    <h2>City models</h2>
    <p>Places in miniature.</p>
    <a href="#visiting">Visit City models</a>
  </article>
</div>
<section id="visiting">
  <h2>Visiting information</h2>
  <p>Open daily, 10:00-17:00.</p>
</section>
</main>

The headings form a meaningful hierarchy even before styling. Layout should improve this structure rather than become the only reason it is understandable.

Open the browser view and follow the links with Tab and Enter. The entries stack in document order; styling comes next.

Grid for related rows and columns

Grid defines tracks for content arranged in rows and columns. Fractional (fr) units share available space between tracks. The following version of the exhibition guide gives its cards a responsive grid:

<main class="exhibitions">
<h1>Exhibition guide</h1>
<div class="entries">
  <article>
    <h2>Tools of navigation</h2>
    <p>Maps and instruments.</p>
    <a href="#visiting">Visit Tools of navigation</a>
  </article>
  <article>
    <h2>Paper archives</h2>
    <p>Documents from the city.</p>
    <a href="#visiting">Visit Paper archives</a>
  </article>
  <article>
    <h2>City models</h2>
    <p>Places in miniature.</p>
    <a href="#visiting">Visit City models</a>
  </article>
</div>
<section id="visiting">
  <h2>Visiting information</h2>
  <p>Open daily, 10:00-17:00.</p>
</section>
</main>
<style>
* {
  box-sizing: border-box;
}
.exhibitions {
  max-inline-size: 70rem;
  margin-inline: auto;
  padding: 1rem;
  overflow-wrap: anywhere;
}
.entries {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.entries article {
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid #64748b;
  overflow-wrap: anywhere;
}
</style>

Read the column definition from the inside out:

• min(100%, 18rem) makes the minimum card width at most the container width.
• minmax(..., 1fr) lets each column grow from that minimum to share spare space.
• repeat(auto-fit, ...) fits as many of those columns as the available width allows.

At 320px the cards stack; with more room several fit beside each other. In the browser inspector, replace a title with a long unbroken string and observe its wrapping. The grid preserves the original document order.

A metadata panel has a different relationship: its labels and values should align across rows. A dl pairs each term (dt) with its description (dd):

<dl class="metadata">
<dt>Venue</dt>
<dd>Central library</dd>
<dt>Access</dt>
<dd>Step-free entrance on the east side</dd>
</dl>

<style>
.metadata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.5rem 1rem;
}
.metadata dd {
  margin: 0;
  overflow-wrap: anywhere;
}
</style>

Here minmax(0, ...) allows a track to shrink below a long child’s intrinsic width. The CSS Grid guide explains fixed, fractional, and automatically repeated tracks.

Flexbox for a row of controls

Flexbox is useful for arranging a group along one main axis. This navigation example includes the link destinations. Its aria-label names the navigation region for assistive technology:

<nav class="guide-actions" aria-label="Guide navigation">
<a href="#visiting">Visiting information</a>
<a href="#exhibition-access">Access information</a>
</nav>
<section id="visiting">
<h2>Visiting information</h2>
<p>Open daily, 10:00-17:00.</p>
<p id="exhibition-access">Step-free entrance on the east side.</p>
</section>

<style>
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
</style>

The navigation links can now wrap when they no longer fit. Do not shrink their text until they fit one line at every width.

Grid and Flexbox overlap in capability. Choose the model that makes the intended relationship between items clear.

Breakpoints based on available space

A different composition, such as a sidebar beside a main region, can start stacked and introduce columns only when sufficient room exists. This alternative fragment shows that separate choice; it is not another step for the exhibition guide:

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

@media (min-width: 52rem) {
  .schedule-layout {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

The breakpoint is a design decision for this content. It is not a universal definition of tablet or desktop.

Keep the DOM order meaningful. CSS order and visual grid placement can make the visible order differ from keyboard focus and reading order. If the interface only makes sense after visual reordering, reconsider the document structure.

Reflow, long text, and zoom

Inspect narrow and wide viewports, but also vary text. In the responsive preview, try a long exhibition title or an empty description. Increase browser zoom and check whether content and controls remain available without unnecessary two-dimensional scrolling.

An automated overflow check can compare the document’s scroll width with its client width. That measures one property; it does not establish that every item is visible or that the controls are comfortable. Choose checks for the actual layout and content under investigation.

Use these prompts while inspecting the inline previews. Their width is limited by the reading column. For a full-page manual viewport check, you can save the preview’s HTML and styles in a local HTML file and open it in a browser:

The 320 CSS-pixel width also appears in WCAG’s reflow criterion: for vertically scrolling content, information and functionality should remain available without horizontal scrolling, with exceptions for content whose meaning requires two dimensions. A narrow viewport is not itself a browser-zoom test. The schedule exercise’s browser checks cover narrow and wide viewports and enlarged text. A manual browser-zoom observation, such as one made during the marketplace audit, examines a condition those checks do not reproduce.

Check Your Understanding

1. What is the difference between shrinking an interface and allowing it to reflow?
2. Why might a grid child need min-inline-size: 0?
3. Why should a breakpoint follow content requirements rather than a device name?
4. How can visual reordering create a keyboard-order problem?
5. A browser test asserts document.documentElement.scrollWidth <= window.innerWidth. What does that establish, and which layout/accessibility problems can it miss?