Quickly Create a Classic Layout with CSS Grid

on YouTube ↗15m

" summary

A live demo of building a classic header/nav/main/sidebar/footer layout using only CSS Grid. It shows using display:grid, grid-gap, grid-template-rows/columns with minmax() and fr units, then switching to a three-column desktop layout via media queries and grid-template-areas; examples compare an article at 1fr vs sidebars at 1fr each or main at 2fr, requiring no HTML changes and working in modern browsers (with older prefix fallbacks).

AI-written summary · about

" chapters (10)

1. 0:00Introduction to CSS Grid
2. 1:06Basic grid creation
3. 3:11Column and row definition
4. 4:41Mobile layout with gap
5. 5:02Wide-screen layout
6. 7:34Auto element placement
7. 8:15Grid template areas
8. 10:02Template areas customization
9. 12:12Summary and tips
10. 12:55Q&A

" related talks

• 02h 55mCSS Grid is the new blackChen Hui Jing · JSConf.Asia 2018
• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 43mModern CSS Layout is Awesome!Michelle Barker · beyond tellerrand Düsseldorf 2023
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 47mCSS Grid - What is this Magic?!Amy Kapernick · Build Stuff 2022
• 50mCSS Grid LayoutRachel Andrew · CSS Day 2015