CSS: responsive layouts, grids and typography

Learn in your browser · Chapter 01 of 06

Measure the boxes on the event page, and see why one line of CSS makes widths mean what they say.

This workbook continues the Marigold Lane Seed Swap page from the HTML workbook. Leave its style.css alone and add a second file, layout.css, that loads after it. Every result was measured in Microsoft Edge 153 at three viewport widths: 360, 768 and 1280 CSS pixels (the browser's unit of length, not a screen dot).

Create an empty layout.css in event-page, and add this line to index.html under the existing link line.

<link rel="stylesheet" href="layout.css">

Every element makes a box: content, padding, border and margin, from the inside out. By default (box-sizing: content-box) width sets the content only, and padding and border are added outside it. With border-box, width covers content, padding and border (MDN). The HTML workbook's style.css gives main a max-width of 42rem (a rem is the root font size, commonly 16 pixels, so 672) and 1rem of padding left and right.

Open index.html, right-click, choose Inspect and press Ctrl+Shift+J (Command+Option+J on macOS) for the Console. The first time you paste there, Edge asks you to type allow pasting: do so only for code you understand, like these read-only lines (Microsoft). This line returns the border box width in CSS pixels (MDN). For other widths use Device Emulation: Toggle device emulation on the Activity Bar, Responsive Viewport Mode, then type a width. Microsoft calls it a first-order approximation of a phone.

document.querySelector('main').getBoundingClientRect().width

At 768 and 1280 the max-width limits only the content, so the padding makes the box 704 wide. Add this to layout.css, then measure again.

*, *::before, *::after { box-sizing: border-box; }

* matches every element, ::before and ::after generated content. In a normal window or with the Desktop device type, a classic scrollbar takes a few pixels, so some of your figures may be lower.

Learn in your browser · Chapter 02 of 06

When rules disagree the browser must pick one. Learn the real order, and keep your choices in custom properties.

The cascade picks one winning declaration for each property on each element. The CSS Cascading specification sorts the candidates by these criteria, highest first, plus two not used here: shadow DOM context and @layer.

Scroll sideways to see every column.

So layout.css, linked second, wins ties with style.css. Specificity is a three-part score: A counts ID selectors, B classes, attributes and pseudo-classes, C element names and pseudo-elements. * and combinators count nothing. Scores compare from A onwards, never as one number, so one ID beats any number of classes. :is(), :not() and :has() take the score of their most specific argument, and :where() counts zero (Selectors Level 4). Hover a selector in the DevTools Styles pane to see its score (Microsoft).

Custom properties (CSS variables) are names that begin with two hyphens. Declare them once, usually on :root, read them with var(), and override them on any element. Add this to layout.css.

:root {
  --ink: #1b1a17;
  --paper: #fbf7ec;
  --accent: #6b4f00;
  --page: 56rem;
  --gutter: 1rem;
}
body { color: var(--ink); background: var(--paper); }
a { color: var(--accent); }
header, main, footer { max-width: var(--page); padding-inline: var(--gutter); }

The colours are style.css's own, so nothing changes visibly, but the last rule swaps its 42rem limit for 56rem: main now measures 360, 768 and 896. var() works only in property values, not in a media or container query condition (MDN, CSS Variables specification): @media (min-width: var(--bp)) never matched in the test.

Learn in your browser · Chapter 03 of 06

Flexbox lays items along one line, grid along rows and columns. Use each where it fits.

Flexbox is one-dimensional: items run along the main axis, a row or a column, and the cross axis runs across it. justify-content spaces items along the main axis, align-items aligns them across it, and flex-wrap: wrap lets items drop to a new line (MDN). This makes the header a row, brand left and menu right, wrapping when it must. gap sets the space between items and lines.

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

Grid is two-dimensional: you define tracks (columns and rows) and items fall into them, and fr is a share of the free space. Add a Stalls section to index.html between the programme and sign-up sections, then the grid rules.

    <section id="stalls">
      <h2>Stalls</h2>
      <ul class="cards">
        <li><article class="stall"><h3>Vegetable seeds</h3><p>Beans and peas.</p></article></li>
        <li><article class="stall"><h3>Flower seeds</h3><p>Sweet peas.</p></article></li>
        <li><article class="stall"><h3>Cuttings</h3><p>Mint, in damp paper.</p></article></li>
        <li><article class="stall"><h3>Tea and cake</h3><p>Sold for the hall.</p></article></li>
      </ul>
    </section>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.stall {
  padding: 1rem;
  border: 1px solid var(--ink);
  border-inline-start: 6px solid var(--accent);
}

Read the columns line from the inside out. minmax(12rem, 1fr): each column at least 12rem, at most one share. repeat(auto-fit, ...): as many columns as fit. min(12rem, 100%) stops overflow in a container narrower than 12rem. With few items auto-fit collapses empty columns so items stretch, and auto-fill keeps them (MDN, CSS Grid Level 2).

Use flexbox when content decides the flow along one line, grid when you decide the columns. In DevTools, click the grid badge in the DOM tree for an overlay, and tick Show track sizes in the Layout tab (Microsoft).

Learn in your browser · Chapter 04 of 06

Adapt the page without piles of breakpoints: text that scales, one media query, and a container query.

Fluid type grows with the screen between limits: clamp(min, preferred, max) never returns less than min or more than max. Give the preferred value a rem part so the reader's text size still counts: vw (1% of the viewport width) alone ignores it, and WCAG failure F94 says text sized mainly in viewport units is likely to fail 1.4.4 Resize Text. MDN advises a maximum at least twice the minimum.

h1 { font-size: clamp(1.5rem, 1.1rem + 2.5vw, 3rem); line-height: 1.2; }

At 360 the preferred value is 1.1 x 16 + 0.025 x 360 = 26.6 pixels, between the limits, so that is the size.

Media queries apply rules by viewport features. Write them mobile first with min-width and in rem: relative units in a media query come from the initial font size, not page styling (Media Queries specification), so 40rem is 640 pixels at the default text size even with html { font-size: 200% }. Here the query changes a token, not the rules.

p { max-inline-size: 65ch; }
@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
}

Container queries style a component by its container's width, not the screen's. Mark the container with container-type: inline-size and use @container on its descendants: an element cannot be styled by its own container query. A stall card's cell width changes with the grid, so the card is wide on the phone and narrow on the laptop: a viewport query gets that backwards.

.cards > li { container-type: inline-size; }
@container (min-width: 16rem) {
  .stall { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; }
}

On the phone each card shows its title beside its text. On the tablet and laptop the title sits above it.

Support. Size container queries are in the CSS Containment Module Level 3, still a W3C Working Draft (August 2022). Browsers ship them: on 26 September 2026 caniuse listed Edge and Chrome 106, Firefox 110 and Safari 16.0 onwards, and marked them Baseline widely available. Older browsers need a fallback (MDN).

Logical properties name sides by writing direction, not left and right: in English inline runs left to right and block top to bottom, and in Arabic inline is reversed (MDN). This page uses padding-inline, max-inline-size and border-inline-start, and margin-left would become margin-inline-start. 65ch is 65 zeros wide.

Learn in your browser · Chapter 05 of 06

Readers choose a colour scheme and a motion level, and many use only a keyboard. Style for them, then check.

Colour scheme. prefers-color-scheme reports whether the reader asked for a light or dark theme. Because your colours are tokens, a dark theme is one rule. color-scheme: light dark also restyles form controls, scrollbars and the page canvas (MDN).

:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #fbf7ec; --paper: #1b1a17; --accent: #e3b94d; }
}

To test without changing your system, use the Toggle common rendering emulations button in the Styles tab (Microsoft). Text is 16.26:1 and links 9.37:1 on the dark background.

A trap. Press Tab in dark mode. style.css draws the focus ring in a fixed #1b1a17, 1.00:1 against the dark background, so it vanishes, and so do the table borders. A colour fixed in one place breaks when tokens change in another. :focus-visible shows focus when the browser judges it should be evident, typically for keyboard use (MDN).

:focus-visible { outline-color: var(--ink); }
th, td { border-color: var(--ink); }

The ring is now rgb(251, 247, 236) in dark mode and rgb(27, 26, 23) in light, 16.26:1 either way. WCAG wants visible focus (2.4.7 Focus Visible, AA), a 3:1 indicator against adjacent colours (1.4.11 Non-text Contrast, AA) and author-created content, such as a sticky header, that does not entirely hide the focused control (2.4.11 Focus Not Obscured (Minimum), AA, new in 2.2; WCAG technique C43 uses scroll-padding). 2.4.13 Focus Appearance is new but AAA. Removing the indicator is failure F78.

Motion. prefers-reduced-motion: reduce reports a request for less non-essential motion, which can trigger discomfort in people with vestibular disorders (MDN). Windows 11 has it under Accessibility, Visual effects, Animation effects. Add motion only when the reader has not asked for less.

@media (prefers-reduced-motion: no-preference) {
  .stall { transition: transform 0.2s ease-out; }
  .stall:hover { transform: translateY(-4px); }
}

The card's transitionDuration was 0.2s with no preference and 0s with reduce (emulated). This supports 2.3.3 Animation from Interactions (AAA); technique C39 uses the query.

Contrast. WCAG 1.4.3 Contrast (Minimum) (AA) asks for 4.5:1 for normal text and 3:1 for large text. The page's light links are 7.15:1. Ratios are not rounded, so 2.999:1 fails 3:1 (1.4.11 guidance).

Learn in your browser · Chapter 06 of 06

Learn the browser's tools, then use them on a stylesheet you did not write.

Scroll sideways to see every column.

Sideways overflow is the commonest phone bug. At 360, this Console line lists the elements whose right edge passes the viewport, outermost first, and changes nothing. On the finished page it returned an empty list at 320, 360, 768 and 1280.

[...document.querySelectorAll('body *')].filter(e => e.getBoundingClientRect().right > document.documentElement.clientWidth).map(e => e.tagName.toLowerCase())

AI-written CSS. An assistant can write a plausible stylesheet in seconds, but its faults are predictable: properties that do not exist, fixed pixel widths and heights, !important to win arguments, prefixes for long-supported features (caniuse lists box-shadow and border-radius as Baseline widely available), removed focus outlines and pale greys. This stylesheet was written for this workbook, not by any product. Copy event-page to event-page-review, save it as assistant.css there and link it instead of layout.css.

main { width: 1200px; max-width: none; margin: 0 auto; }
h1 { font-size: 4vw; }
.cards li { float: left; width: 300px; height: 90px; overflow: hidden; margin-x: 1rem; }
nav a { -webkit-box-shadow: 0 2px 4px #000; -moz-border-radius: 6px; color: #999999 !important; }
* { outline: none !important; }
body { overflow-x: hidden; }

A checker sees what is not allowed, and can be wrong: the Nu Html Checker (26.9.16) reported the valid container-type and @container in the finished layout.css as two errors. The checker receives whatever you upload, so send only practice files. Know your limits: none of this is WCAG conformance, and these numbers come from one browser on one machine, so test on real phones, in other browsers and with a screen reader.