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
- Media vs Container
- Normal Flow
- Media vs Container (Live Demo)
- CSS is Rad
- Containing Size
- Understanding containment
- Enter the 36 Chambers
- Size queries, relative/var units
- 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!
- A quick bit of grid
- Implicit Grids
- Grid Terminology by Stacy Kvernmo
- Explicit Grids
- Understanding 1fr
- Stages of Squishiness
- Variations on a media-object
- Named grid lines
- Overlapping Named Lines
- Revisit Gwen
- Auto-Fit Grid by Stacy Kvernmo
- Subgrid Cards
- Subgrid Forms
- Grid & Variable Temperatures
- Bonus Work Session and goal
Resources
- Can I Use: CSS Container Queries (Size)
- Propagating Up in CSS by Jim Nielsen
- 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
- Chrome Labs: Container query polyfill
- Responsive Web Design by Ethan Marcotte