Solving Layout Problems With CSS Grid and Friends

on YouTube ↗43m

" summary

CSS Grid Layout launched into the majority of our browsers in 2017 and the session shows concrete techniques: use 1fr and minmax with repeat(auto-fill/fit) to build a responsive 12‑column system, use grid-gap and object‑fit for image panels, and prefer feature queries to provide fallbacks (flex, display:table, multicolumn). The talk reports real interoperability work—grid ships in seven browsers—and points out unsolved limits like display:subgrid not implemented and masonry‑style layouts that require workarounds.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 0:51CSS Grid Layout
3. 4:22Flexbox
4. 6:23Grid Frameworks
5. 7:57Sizing
6. 10:10FR Units
7. 12:08When to use percentages
8. 13:43Example panel
9. 17:30CSS Sizing
10. 22:01Old Browsers
11. 26:14New Browsers
12. 28:47Understanding CSS
13. 30:07What might come next
14. 34:22Masonry

" related talks

• 31mSolving layout problems with CSS Grid and friendsRachel Andrew · Mirror Conf 2017
• 30mSolving Layout Problems with CSS Grid and FriendsRachel Andrew · View Source 2017
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 30mSolving layout problems with CSS Grid and friendsRachel Andrew · Nordic.js 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 32mCSS Grids: the Near Future of LayoutMassimo Artizzu · CSS Day 2017
• 02h 55mCSS Grid is the new blackChen Hui Jing · JSConf.Asia 2018