Start Using CSS Grid Layout Today
summary
CSS Grid Layout is now shipping in desktop browsers (Edge 16 just rolled out) and is meant for two-dimensional grid vs 1D flex work, so use grid when you’re fighting with widths on flex items. Examples show FR units, min-content/max-content/fit-content sizing, line-based placement, named lines and auto-placement; a personal site is rebuilt on a 12-column grid and deployed to production successfully. Fallback strategy uses flexbox or multicolumn plus feature queries fallback and notes IE10/11 use an older MS-prefixed grid spec.
AI-written summary · about
chapters (50)
- 0:00Introduction
- 0:55Overview
- 1:52Grid vs Flex
- 3:03Grid is 2D
- 4:23Layout in
- 5:15Create a grid
- 6:13CSS sizing keywords
- 8:07Grid vs Flexbox
- 11:04Line Numbers Grid
- 11:16Line Names Grid
- 12:04Grid Layout
- 13:42Grid Inspector
- 14:48Examples
- 15:23My Site
- 15:44Individual Boxes
- 16:06Feature Block
- 16:40Grid Gap
- 17:59Grid Position
- 18:50Explicit Grid
- 19:47Layering
- 21:06Auto Placement
- 22:25Line Base Positioning
- 24:00Container Items Auto
- 24:10Item Rules
- 24:46Redefining the Grid
- 25:31Splitting the Grid
- 25:51Changing the Boxes
- 26:07Narrow Breakpoints
- 26:52Old Browsers
- 28:13Flex Items
- 29:15Flex Box as a fallback
- 29:44Adding a margin to flex items
- 30:18Feature queries
- 32:19Flex layout
- 33:41Inline block
- 33:57Display table
- 35:07Multiple column layout
- 36:20Widths
- 36:51Cheat Sheet
- 39:10Edge Support
- 39:33Every Browser Was A Business
- 39:59Make Known What Features You Would Like
- 40:25Microsoft Edge User Voice
- 40:55CSS Exclusions
- 42:23WrapFlow
- 42:45Platform Status
- 43:33CSS Working Group
- 44:18Grid Issues
- 45:35Vote on Browser Features
- 46:09Conclusion
