Many Flavours of Enterprise CSS Grid

on YouTube ↗24m

" summary

Browser support is overwhelming (over 98%) yet grid adoption lags in a ~8,000‑developer survey, and real code shows three practical implementations: global CSS, componentized grid + CSS modules, and Tailwind config hacks; examples use React, named grid areas to simplify breakpoint changes, and minmax + autofit responsive without media queries to reduce media queries. Code is tested and works, Spotify is cited as a production user, and named grid areas plus Tailwind config exposes grid APIs are demonstrated.

AI-written summary · about

" chapters (17)

1. 0:00Introduction
2. 1:21CSS Grid matters
3. 3:21Flexbox vs Grid adoption
4. 5:14CSS Grid basics
5. 7:44Named grid areas
6. 9:21Grid inspector
7. 10:58Container vs item layouts
8. 11:49Design systems and Grid
9. 13:17Global CSS approach
10. 14:25Component-based Grid
11. 15:55Tailwind and Grid
12. 17:26Testing Grid implementations
13. 18:37Choosing Grid approach
14. 20:34Factors in Grid decisions
15. 22:22Documenting Grid
16. 23:34Why document Grid
17. 23:54Final thoughts

" related talks

• 31mHow to use CSS grid today in the real worldBrenda Storer · CSSConf AU 2018
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 18mRefactoring with CSS GridOliver Williams · CSSconf EU 2018
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 47mCSS Grid - What is this Magic?!Amy Kapernick · Build Stuff 2022
• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019
• 48mStart Using CSS Grid Layout TodayRachel Andrew · DevFest Nantes 2017