Layout

Geometry: the box model, normal flow, flexbox, grid, positioning, intrinsic sizing, overflow — and the read-write-read pattern that forces the browser to compute it all again.

The Box Model

Every element is four nested edges — content, padding, border, margin — plus a sizing mode that decides which of them `width` is actually describing.

Q · When I set `width: 300px`, what exactly is 300 pixels wide, and why does the element occupy more space than that?
Normal Flow, Overflow and Margin Collapsing

What the browser already does before you choose a layout mode: block and inline formatting, margins that merge, and the moment a box becomes a scroll container.

Q · Before I reach for flexbox, what is the browser doing by default — and where does the content go when it does not fit?
Flexbox: One Axis at a Time
▶ lab

A distribution algorithm, not a property list: base sizes, free space, grow and shrink along the main axis, alignment along the cross axis.

Q · What is flexbox actually computing when I write `flex: 1`, and why does one long item push everything else out of the way?
Grid: Two Dimensions at Once
▶ lab

The container declares tracks and lines; items are placed into the cells between them. Rows can finally align to columns, because the layout — not the content — owns the sizes.

Q · When is a two-dimensional layout the right model, and what is `1fr` actually a fraction of?
Positioning and Stacking Contexts

Taking a box out of flow: which ancestor it is positioned against, and why `z-index: 9999` still loses to a header with `z-index: 1`.

Q · Which box am I positioned relative to, and why is my dropdown still behind the header?
Intrinsic Sizing and the Automatic Minimum

What a box wants to be when nobody tells it: min-content, max-content, fit-content — and the `min-width: auto` rule that makes flex and grid items overflow.

Q · What size does a box choose on its own, and why does a flex item refuse to shrink below its longest word?
Layout Thrashing
▶ lab

Read a layout property, write a style, read again: each read forces the browser to recompute the geometry you just invalidated, synchronously, inside your loop.

Q · Why does a loop that only reads two properties per element cost more than the render it triggers?