Grids & Layout
Sometimes we also need to impose external structure to create consistent and reliable layouts, even with unpredictable content. This is a full session dedicated to Grids & Sub-grids, the multiple ‘stages of squishiness’, and container queries.
CodePen Demos
- CSS Grid Alignment
- Grid Terminology by Stacy Kvernmo
- Implicit Grids
- Overlapping content in grids
- Explicit Grids
- Auto-fit & auto-fill
- Auto-Fit Grid by Stacy Kvernmo
- Variations on a media-object
- Named grid lines
- Overlapping Named Lines
- Subgrid Forms
- Stages of Squishiness
- Understanding 1fr
- Media vs Container
- Media vs Container (Live Demo)
- CSS is Rad
- Understanding containment
- Containing Size
- Enter the 36 Chambers
- Size queries, relative/var units
- Container Query Bookstore by Max Böck
- Container Query Blinds v2 by Jhey Tompkins
- Style query button themes
- Sticky Header State Query!
Resources
- Responsive Web Design by Ethan Marcotte
- Everything You Know About Web Design Just Changed by Jen Simmons
- Can I Use: CSS Container Queries (Size)
- Ancestor Layout Loops with Single-Axis Containment
- Weaker form of layout containment for container queries
- The Large, Small, and Dynamic Viewports by Bramus Van Damme
- Can I Use: CSS Container Style Queries
- CSSWG issue for state queries
- Chrome Explainer: CSS State Container Queries by Rune Lillesveen