CSS Grid is the new black

on YouTube ↗02h 55m

" summary

Workshop shows how CSS Grid replaces hacks by proving exact claims: grids can lay out a responsive dashboard, an image gallery and a diagonal header using grid-template-areas, minmax(…, max-content), repeat and 1fr, with fallbacks for old browsers. Demos use the Firefox layout inspector and object-fit for images; examples include a six-column layout that collapses to 1–2–3 columns via auto-fill/auto-fit and a printable banner composed entirely in CSS. Code works live in Firefox (nightly features used); some visual quirks require media queries.

AI-written summary · about

" chapters (23)

1. 0:00Start
2. 11:56How a Browser Vendors Elements on the Page
3. 24:56Define a Grid
4. 28:12Change a Color Scheme
5. 42:02Layout Panel
6. 43:34Name Lines
7. 47:43Grid Template Areas
8. 48:14Grid Items
9. 55:00Min Max Function
10. 57:31Repeat Function
11. 1:04:35Line Numbers
12. 1:08:19Aligning Grid Items
13. 1:09:32Justify Content
14. 1:19:24Min Aspect Ratio
15. 1:21:07Mean Aspect Ratio Media Query
16. 1:32:46Viewport Units
17. 1:42:18Alignment
18. 1:47:59Flex Lines
19. 1:52:52Mock-Up Structure
20. 2:04:23Media Queries
21. 2:06:39Media Query
22. 2:12:06Spacer Column
23. 2:31:53Presentation Styles

" related talks

• 58mCSS Grid - What is this Magic?!Amy Kapernick · NDC Oslo 2019
• 47mCSS Grid - What is this Magic?!Amy Kapernick · Build Stuff 2022
• 30mStart Using CSS Grid Layout TodayRachel Andrew · RuhrJS 2017
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 01h 02mStart Using CSS Grid Layout TodayRachel Andrew · Frontend United 2017
• 45mCSS Grid - What is this Magic?!Amy Kapernick · NDC London 2019
• 52mCSS Grid - What is this Magic?!Amy Kapernick · NDC Minnesota 2019
• 43mSolving Layout Problems With CSS Grid and FriendsRachel Andrew · Web Unleashed 2017