CSS Grid - What is this Magic?!
summary
Shows how CSS Grid lays out a notebook app with concrete code: uses repeat()/fr units to make equal columns, grid-template-areas to place header/nav/main/footer, and seven lines of CSS to get a working layout. Demonstrates autofill/auto-fit + minmax for responsive card grids, uses gap instead of margins, and pairs Grid with Flexbox for nav/footer. Warns that display:contents can hide content from screen readers and that subgrid (Firefox Nightly only) is the new feature to watch. Recommends using Firefox DevTools grid inspector; browser support is ~91% in Europe.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 8:39What is CSS Grid
- 13:43FR Unit
- 15:05Grid Template
- 22:16Display Contents
- 24:33Display Contents Bug
- 25:55CSS SubGrid
- 29:05Flexbox vs Grid
- 29:50Grid vs Flexbox
- 30:57justify items
- 32:26width
- 34:21autofill
- 35:43minmax
- 37:26gridgap
- 40:35browser support
- 44:28supports query
- 46:21Grid template areas
- 46:59CSS Grid 20
- 47:52CSS Grid Support
- 49:33CSS Grid Maintenance
- 50:17Conclusion
- 51:13Resources
- 53:21Questions
