Layouts
Unlike the printed page, web content and context can be unpredictable. CSS provides tools to manage that uncertainty, aligning & distributing objects on the page. We’ll talk about box alignment, the flexible box model, grids, subgrid, and container queries.
CodePen Demos
- Alignment in absolute position
- Safe & Unsafe Alignment
- Flexbox is inline-ish
- A quick bit of grid
- Grid Terminology by Stacy Kvernmo
- Implicit Grids
- Explicit Grids
- Understanding 1fr
- Stages of Squishiness
- Named grid lines
- Overlapping Named Lines
- Subgrid Cards
- Revisit Gwen
- Containing Size
- Understanding containment
- Enter the 36 Chambers
- Size queries, relative/var units
- Media vs Container (Live Demo)
- CSS is Rad
- Flexbox cards, with Container Queries
- Container Query Bookstore by Max Böck
- Container Query Blinds v2 by Jhey Tompkins
- Style query button themes
- Sticky Header State Query!
Resources
- CSS Box Alignment specification
- Flex shorthand values
- Layout Land videos by Jen Simmons
- Grid by Example from Rachel Andrew
- Winging It LIVE with Stephanie Eckles
- An Interactive Guide to CSS Grid by Josh Comeau
- Everything You Know About Web Design Just Changed by Jen Simmons
- Ancestor Layout Loops with Single-Axis Containment
- Relaxed layout containment for CQs
- Propagating Up in CSS by Jim Nielsen
- The Large, Small, and Dynamic Viewports by Bramus Van Damme
- CSSWG issue for state queries
- Sticky Headers Chrome Explainer