Solving layout problems with CSS Grid and friends

on YouTube ↗31m

" summary

CSS Grid ships to most browsers in 2017 and provides two-dimensional layout where columns and rows are defined on the container rather than sized per item. Practical techniques shown include using fr unit for proportional space, minmax(200px, 1fr) with autofill/autofit to create responsive columns, mixing fixed tracks like a 400px sidebar plus 20px gutters, and content-aware sizing with min-content/max-content/fit-content. Note subgrid is not in level 1 yet, and feature queries are recommended for graceful fallbacks to older methods.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 5:43CSS Grid Layout is a native CSS framework. Built into the browser.
3. 20:47Use the cascade. Write code for old browsers then code for new browsers.
4. 23:16The fundamentals of CSS haven't changed

" related talks

• 30mSolving layout problems with CSS Grid and friendsRachel Andrew · Nordic.js 2017
• 43mSolving Layout Problems With CSS Grid and FriendsRachel Andrew · Web Unleashed 2017
• 30mSolving Layout Problems with CSS Grid and FriendsRachel Andrew · View Source 2017
• 59mGrids all the way downRachel Andrew · Frontend United 2019
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 48mStart Using CSS Grid Layout TodayRachel Andrew · DevFest Nantes 2017
• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019
• 47mCSS Grid - What is this Magic?!Amy Kapernick · Build Stuff 2022