8.4 Layout & responsive thinking

Layout is how the pieces are arranged and how that arrangement reflows when the screen gets narrower. You don’t need to write CSS, but you do need to describe a layout precisely — “a two-column grid that stacks on mobile, content capped at a readable width” — so the AI builds the right structure instead of guessing. This chapter is the vocabulary of arrangement. (The mechanics — how the box model and grid actually render — are Module 5.)

Key vocabulary

Box model: How every element is sized: the content, then padding inside the border, the border itself, and margin outside it. Shorthand: padding is space within, margin is space between.
Flexbox: A one-dimensional layout: lay items out in a row or a column and let them wrap. Perfect for toolbars, button groups, and nav bars.
Grid: A two-dimensional layout: rows and columns at once. Use it for the overall page structure — a sidebar plus content, or a gallery of cards.
Breakpoint: A viewport width at which the layout switches — e.g. one column on phones, two on tablets, three on desktops. The set of breakpoints is what makes a design “responsive.”
Reading width / measure: A max-width on text containers (~65–75 characters) so lines stay comfortable to read on large screens instead of stretching edge to edge.

Inside vs between: the box model

You don’t need to write it, but you need to say it. Every element is a box: content in the middle, padding as breathing room inside the border, the border, and margin as the gap to its neighbours. When a card feels cramped, you want more padding (inside). When two cards are touching, you want more margin (between). Naming which one you mean is the difference between one precise instruction and three rounds of “a bit more space… no, the other space.”

One dimension or two: flexbox vs grid

This is the one layout decision worth knowing by name. Flexbox lays things out in a single direction — a row or a column — and is ideal when items should flow and wrap: a toolbar, a row of tags, a navbar. Grid places things in rows and columns at once and is the tool for the overall page: a fixed sidebar beside fluid content, or a responsive gallery of cards. The rule of thumb: flex for a line of things, grid for a layout of regions.

FIG 1 · flex (a line) vs grid (a layout) Flexbox flows items along one axis and wraps; grid places them into explicit rows and columns.

Mobile-first, and why text needs a leash

Design the narrow layout first, then use breakpoints to add columns and space as the screen grows. This beats the reverse — cramming a desktop layout onto a phone — because deciding what matters on a small screen forces real priorities, and expanding is easier than salvaging. The other half is reading width: on a wide monitor, a paragraph that spans the whole screen is exhausting to read, so cap text containers at ~65–75 characters. (This very page does exactly that — the prose has a max width while diagrams can run wider.)

FIG 2 · one layout, three widths The same sidebar-and-content layout reflows: stacked on mobile, side-by-side on tablet, with a wider content area on desktop.

Name the archetype

Most screens are one of a handful of layouts. Naming the archetype gets you a correct skeleton in one sentence.

Archetype	Shape	Good for
Centered column	one capped-width column, centered	articles, forms, marketing pages
Sidebar + content	fixed nav beside fluid content	apps, docs (like this site)
Dashboard grid	a grid of cards / widgets	analytics, admin overviews
Master–detail	a list pane + a detail pane	email, settings, inboxes
Card grid	a responsive gallery of equal cards	products, galleries, search results

“Build a master–detail layout that collapses to a single list on mobile” is a complete spec.

FIG 3 · five layout archetypes Most screens are one of these. Name the archetype and the AI builds the right skeleton in one sentence.

01 Learning objectives

0 / 6 done

02 Curated reading

web.dev — Learn Responsive Design
essential 25m — Breakpoints, fluid layouts, and mobile-first from Google.
MDN — Introduction to CSS layout
optional 18m — The box model, flexbox, and grid in one orientation read.
CSS-Tricks — A Complete Guide to Flexbox
optional 15m — The reference for one-dimensional layout.

03 Knowledge check

knowledge check3 questions · pass ≥ 70%

01easy
Padding vs margin:
02medium
You need a wrapping row of tags. Flexbox or grid?
03medium
“Mobile-first” means…

04 Interview questions

browse all ↗

What gets asked on this topic — tap a card for how to approach it, the follow-ups, and the trap. Company tags are best-effort & sourced.

Commonly asked junior concept common When would you reach for flexbox vs CSS grid?
Flexbox is for one-dimensional layout — a single row or column of items that flow and wrap (a toolbar, a row of tags, a navbar). Grid is for two-dimensional layout — rows and columns at once (a page's sidebar-plus-content, a gallery of cards). The rule of thumb: flex for a *line* of things, grid for a *layout* of regions. They compose, too — grid for the page skeleton, flex inside each region.
What a strong answer covers
- Flexbox = one axis (row or column) that can wrap.
- Grid = two axes (rows and columns) for page structure.
- Flex for a line of items; grid for a layout of regions.
- Common pattern: grid for the page, flex inside each cell.
Follow-ups they push on
- Could you build a card gallery with flexbox? What's the downside?
- Why is grid better for a sidebar + content layout?
Red flag Forcing a whole two-dimensional page layout out of nested flexboxes — grid expresses it directly and stays responsive.
source: MDN — Introduction to CSS layout ↗