How to use CSS grid today in the real world

on YouTube ↗31m

" summary

Claims that CSS Grid is production-ready and already in use since March 2017, with 85% global support and browsers cooperating to minimize bugs. Concrete techniques: wrap grid rules in feature queries (@supports) and place a Flexbox (or Bootstrap) fallback first, write grid-last to override, and rely on Firefox grid devtools to debug. Examples built include a responsive card layout in four CSS lines, a masonry-like article grid, and a newsletter block that reflows correctly — all no JavaScript required and working with a few SASS gotchas.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 1:59GRID IS NICE
3. 4:41Step by Step Guide to writing CSS Grid
4. 5:28Identify a Good Use Case
5. 8:54Write Grid Code
6. 11:09Fallback gracefully with feature queries
7. 12:30Grid code with a Flexbox fallback: Ready for production!
8. 13:14Order matters Fallback first as the default Grid code last, so it can override the default styles
9. 30:16Resources & Examples from Me Codepen Collection of CSS Grid Examples A Fearless Guide to Using CSS Grid Today

" related talks

• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 52mCSS Grid in DetailSven Wolfermann · International PHP Conference Spring 2018
• 48mStart Using CSS Grid Layout TodayRachel Andrew · DevFest Nantes 2017
• 15m⚡️ FEDC 2018 - Tim SmithTim Smith · Front-End Design Conference 2018
• 43mSolving Layout Problems With CSS Grid and FriendsRachel Andrew · Web Unleashed 2017
• 31m"CSS3 Layouts: Flexbox vs CSS Grid"Sara Vieira · Codemotion Milan 2015