Skip to content
Play · 40 min

Code · Modern CSS layouts

Thinking in layout, not breakpoints

Lesson 1 of 4 · 40 min · with Marco Bellini

How the browser decides where things go, and why most layout bugs start there.

Most layout bugs are not about grid or flexbox. They come from fighting the browser’s own rules for sizing boxes.

The three questions

For any element, ask: how wide does it want to be, how wide is it allowed to be, and what happens to its neighbours when it grows? Answer those and the right tool becomes obvious.

Intrinsic sizing

min-content, max-content and fit-content let content decide its own size. We use them to fix three common bugs without a single media query.