CSSHTMLIntermediate~3h

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 projectSee 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

01

Boxes and their arithmetic

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

02

Both flex axes, and flex: 1

Which property moves what, and where the space goes.

03

Grid placement and tracks

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

04

Position, and what is on top

Containing blocks, stacking contexts, dead z-indexes.

The pitch

What you practise, and what you leave with

One page, four layout systems at once: a grid shell, a flex toolbar, a sticky rail, and a dropdown that has to escape a transformed ancestor.

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

6 modules, 19 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

  1. 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. 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. 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. 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. 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. 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

More in Web & frontend

Keep going

All Web & frontend projects

Modern CSS

Six features that changed what a stylesheet is.

Intermediate~4h6 modules

CSS: Cascade & Specificity

Specificity is the fifth question, not the first.

Intermediate~4h5 modules

HTML & Semantics

Two documents that look identical. Only one of them says anything.

Foundational~4h6 modules

Tailwind

A class name is a compiled selector.

Intermediate~4h5 modules

Predict the box before the browser draws it.

The first item is free. ~3h of focused work, at your own pace.

Start CSS: LayoutAll projects

Intermediate~3h6 modules