CSS: Layout

Layout you can predict

Layout is arithmetic and a few rules about what a box is measured against — not taste. Six of them, drilled on numbers that change every time: the box model, both flex axes, what flex: 1 expands to, grid placement and track sizing, the containing block, and the context that makes z-index: 9999 do nothing.

Start this project See the modules

Modules: 6
Drills: 8
Build steps: 4
Time: ~3h

Walk out able to

Say what a box will measure before you reload — and, when it lands somewhere else, name the rule that put it there.

What you work on

Boxes and their arithmetic

What `width` names, and what gets added outside it.

Both flex axes, and flex: 1

Which property moves what, and where the space goes.

Grid placement and tracks

Lines, spans, implicit rows, and what `fr` divides.

Position, and what is on top

Containing blocks, stacking contexts, dead z-indexes.

What you get

Skills that stick

Every project mixes short lessons, focused drills and real build steps, so you finish with working code and the judgement behind it.

You will practise

Box arithmetic under both box-sizing values
Flex axes, the shorthand, and free space
Grid placement, fr, auto-fill vs auto-fit
Containing blocks and stacking contexts

Afterwards you can

Predict a box’s width before reloading
Expand any flex shorthand from memory
Name what an offset is measured against
Fix a dead z-index without a bigger number

Modules

Step by step

Each module builds on the last. Read a short lesson, drill it until it's second nature, then put it to work.

1
The box you actually get
~24 min
Compute a box’s rendered width from its declarations, before the browser does.
- LessonWhy layout is arithmetic4 min
- LessonWhat width actually names11 min
- DrillCompute a rendered width9 min
2
Main axis, cross axis
~21 min
Name both axes for any flex-direction, then pick the property that moves an item.
- LessonName the axis before the property12 min
- DrillChoose the alignment property9 min
3
What flex: 1 means
~33 min
Expand any flex shorthand, then compute the width every item ends up with.
- LessonThe third value nobody writes15 min
- DrillExpand a flex shorthand6 min
- DrillShare out the free space12 min
4
Place things on a grid
~39 min
Place an item by line or span, and compute what an fr track is actually worth.
- LessonLines, tracks and the implicit grid17 min
- DrillPlace an item on the grid10 min
- DrillSize the tracks12 min
5
Position and the containing block
~27 min
Find the box any positioned element’s offsets and percentages are measured from.
- LessonWhat top: 0 is measured from15 min
- DrillFind the containing block12 min
6
Stacking contexts and z-index
~57 min
Say what paints on top, diagnose a dead z-index, and ship the page.
- LessonWhy z-index: 9999 does nothing16 min
- DrillDecide what paints on top12 min
- Build stepLay the page out on a grid8 min
- Build stepShare the toolbar’s leftover space7 min
- Build stepPin the rail heading as you scroll6 min
- Build stepFree the dropdown from its context8 min