CSS Grids: the Near Future of Layout
summary
CSS Grid is now available in modern browsers (Chrome and Firefox stable, others following) and introduces features like grid-template-areas for named regions, the fr unit for fractional sizing, explicit start/end positioning, auto-placement, gap properties, two-axis alignment, and reordering. The talk covers interoperability (old IE syntax needs mappings/prefixes), current limitations (no masonry or non‑rectangular cells), experimental custom layouts via the Houdini Layout API (JS-registered layouts), and available polyfills/devtools with responsive template examples.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:15Web layout history
- 3:05Table and float limits
- 4:30Flexbox arrival
- 9:08Why Flexbox isn’t final
- 10:30CSS Grid evolution
- 11:57Basic Grid properties
- 13:01Flexible units
- 14:28Placing items
- 16:15Naming guides
- 18:23Grid Template Areas
- 19:29Responsive design
- 20:10Grid gaps
- 21:14Auto placement
- 23:19Cell alignment
- 25:06Non-rectangular grids
- 26:31Grid Level 2
- 27:17Grid for tables
- 27:59Browser support
- 29:05Grid vs old IE
- 30:31Grid tools
- 31:55Summary & Q&A
