CSS Grid - What is this Magic?!
summary
Builds a small note-taking app layout using display: grid, grid-template-columns with repeat() and 1fr, grid-template-rows, grid-column: 1 / -1 and span, grid-template-areas and display: contents to let children participate in the parent grid; uses repeat(auto-fill/auto-fit) with minmax() for responsive cards and grid-gap for spacing. Demonstrates Firefox’s grid inspector for visual debugging, cites ~90.98% US browser support and specific versions (Chrome 57, Firefox 52, Safari 10.1, Edge 16), shows the layout works and often needs only a few lines of CSS.
AI-written summary · about
chapters (26)
- 0:00Start
- 3:13Tables for Layouts
- 6:13Css Grid
- 7:16Css Grid Is Specifically Designed for Creating Layouts
- 8:38Wireframe
- 9:39Repeat Function
- 14:08The Grid Column Start Property
- 16:55Grid Template Areas
- 17:55Firefox Dev Tools Grid Inspector
- 18:43Grid Inspector
- 20:02Display Contents
- 21:46Does Grid Replace Flexbox
- 23:01Grid and Flexbox
- 23:56Justify Content Property
- 24:34The Justify Items and a Line Items Property
- 28:21Autofill
- 28:42Auto Fit
- 29:03Autofill Properties
- 30:00Min Max
- 30:34Fr Units
- 31:46Grid Template Roads
- 32:23Grid Gap
- 34:43Internet Explorer
- 36:02Flex Box
- 37:25Supports Query
- 40:37Sub Grid
related talks
45mCSS Grid - What is this Magic?!
47mCSS Grid - What is this Magic?!
58mCSS Grid - What is this Magic?!
29mCSS Grid: What is this magic?!
02h 55mCSS Grid is the new black
01h 02mStart Using CSS Grid Layout Today
29mStart Using CSS Grid Layout Today
34mCSS Grids or: How I Learned to Stop Worrying and Love the New Spec