Grids & Alignment
Sometimes we need to impose external structure to create consistent and reliable layouts – even with unpredictable content. This is a full session dedicated to grid & subgrid, the multiple ‘stages of squishiness’. We’ll also talk about how item/content alignment works, and is applied across layout modes.
CodePen Demos
- Flex items align on one axis
- Grid items can align on both axes
- Grids (live)
- Grid Terminology
- The grid is real
- Overlapping content in grids
- Safe & unsafe alignment
- Explicit Grids
- Variations on a media-object
- Understanding 1fr
- Stages of Squishiness
- Named grid lines
- Overlapping Named Lines
- Subgrid Forms
- Auto-fit & auto-fill
- Auto-Fit Grid