CSS Grid in Detail

on YouTube ↗52m

" summary

CSS Grid is now production-ready because modern browsers implement Level 1 (with partial support in IE10/11). The talk compares Grid’s two-dimensional display:grid model to one-dimensional flexbox, explains responsive units like fr and minmax(), and demonstrates concrete techniques such as minmax() with gap control, grid-template-areas, spanning/overlap, auto-placement (grid-auto-flow: dense), generating 12-column helpers with Sass, and providing fallbacks using flex or floats on live sites.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 1:55Modern CSS Grid layout
3. 3:21Grid basics and support
4. 8:03Simple 3-column grid
5. 12:19Placing cells and areas
6. 16:39Explicit vs implicit grids
7. 21:2012-column grid systems
8. 24:54Grid flexibility vs classic
9. 25:57Full page layout with areas
10. 34:17Empty cells and complex layouts
11. 37:37Overlapping elements
12. 40:50Masonry layouts and gaps
13. 42:37Equal-height cells vs Flexbox
14. 46:23Using minmax and auto-fit
15. 48:33Browser support and polyfills

" related talks

• 31mHow to use CSS grid today in the real worldBrenda Storer · CSSConf AU 2018
• 48mStart Using CSS Grid Layout TodayRachel Andrew · DevFest Nantes 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019
• 45mCSS Grid - What is this Magic?!Amy Kapernick · NDC London 2019
• 32mCSS Grids: the Near Future of LayoutMassimo Artizzu · CSS Day 2017
• 47mCSS Grid - What is this Magic?!Amy Kapernick · Build Stuff 2022