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
- Grid terminology
- Implicit grids
- Overlapping content in grids
- Safe & unsafe alignment
- Explicit grids
- Understanding 1fr
- Stages of squishiness
- Auto-fit & auto-fill
- It’s a feature, not a 🐛
- Variations on a media-object
- Named grid lines
- Overlapping named lines
- Subgrid forms
Resources
- Responsive Web Design by Ethan Marcotte
- Everything You Know About Web Design Just Changed by Jen Simmons
- The Experimental Layout Lab of Jen Simmons