What is it?
Flexbox lays things out along one axis (a row or a column). Grid lays them out in two axes at once (rows and columns). Both replaced the float-and-clearfix hacks of the 2010s and ship in every browser. Most modern UIs are flex inside grid inside flex — they compose, not compete.
Why it matters
Layout is the most common code-review feedback for juniors: a card grid that breaks at 800px, a header that overflows on mobile. Knowing which tool to reach for — and how their gap, alignment, and sizing models differ — turns layout from a frustration into the easiest part of the job.
What to learn
- Flex container vs flex item: what each property belongs to
justify-content,align-items,gap— the daily threeflex-grow,flex-shrink,flex-basis(and whyflex: 1is shorthand)- Grid container basics:
grid-template-columns,gap,grid-template-rows frunits andminmax()— the actual reason Grid is so flexible- Implicit vs explicit grids — when content auto-fills and when it doesn't
Common pitfall
Reaching for absolute positioning when you can't get something centered.
Modern flex/grid centering is one declaration: place-items: center on
the parent. If you find yourself writing top: 50%; left: 50%; transform: translate(-50%, -50%), step back to flex.
Resources
Primary (free):
- MDN — CSS Layout · docs
- CSS Tricks — Complete Flexbox guide · article
- CSS Tricks — Complete Grid guide · article
Practice
Take any landing page (yours, or copy a real one). Rebuild every layout section twice — once with flex, once with grid. Note where each was clearly the right pick and where it didn't matter. Done when you have a gut answer to "flex or grid?" within five seconds of seeing a mockup.
Outcomes
- Choose flex vs grid for any layout without overthinking it.
- Center an element three different ways and explain when each fits.
- Build a responsive card grid using
repeat(auto-fit, minmax(...)). - Compose flex inside grid inside flex without nesting fights.