Flexbox & grid
24 steps in 5 sets of CSS.
Flexbox and grid, which between them retired a generation of float and table hacks. Flexbox for one dimension, grid for two, and the sizing rules that decide what happens when the content does not fit.
Positioning closes it. Twenty-four steps, and the thing worth internalizing is intrinsic sizing: min-content and max-content explain more layout surprises than anything else.
Flexbox
- Flexbox basicsOne flex container turns its children into a row you can control.
- Flex alignmentJustify along the main axis, align along the cross axis.
- Wrapping and growingLetting flex items wrap onto new lines, and how they share leftover space.
- The flex shorthandGrow, shrink and basis, and the three values worth memorising.
- Why a flex item will not shrinkEvery flex item has an automatic minimum size, and it is the reason your text overflows.
- A flex navigation barA real bar: brand on the left, links in the middle, account pushed right.
Grid
- Grid columnsA grid defined by its column track list, with content flowing into rows.
- Placing items on grid linesSpanning tracks by line number, and letting the browser fill the gaps.
- Named grid areasDrawing the layout as a picture, then dropping elements into named cells.
- Responsive grids without queriesauto-fit and minmax give you a responsive card grid in one declaration.
- Aligning inside a gridAligning tracks in the container, and items inside their own cell.
- Rows the grid makes for youYou size the columns; the rows keep arriving whether you planned them or not.
- SubgridA child grid that borrows its parent's tracks, so cards line up across their insides.
Sizing
- Sizing to the contentThree keywords that ask the content how wide it wants to be.
- Holding a shapeOne property replaces the padding-top percentage trick everyone used to memorise.
- Multi-column textNewspaper columns, where the browser does the balancing.
Positioning
- PositioningRelative, absolute and fixed, and the containing block that anchors them.
- Sticky, fixed and the containing blockWhere an absolute element lands depends entirely on which ancestor is positioned.
- Sticky headers and stackingSticky sits between relative and fixed; z-index orders what overlaps.
- Why z-index sometimes does nothingz-index only sorts siblings inside the same stacking context, and lots of things create one.
- Floats, and what they are still forFloats lost the layout job and kept the one they were invented for: text wrapping.
- Four ways to centerThe centering recipes worth knowing, from the margin trick to place-content.
- Snapping a scrollerA carousel that lands on an item instead of stopping between two.
Encore
- dashboard_layout.cssA full app shell: grid areas, sticky header, scrolling panes, responsive fallback.