Laying Out The Future With Grid And Flexbox

on YouTube ↗29m

" summary

Introduces concrete recipes: uses Flexbox, CSS Grid Layout and the Box Alignment module to build layouts, demos a responsive hero that keeps columns aligned by using minmax() with grid-auto-rows and the fr unit, shows auto-placement vs dense backfilling, combines grid for two‑dimensional tracks and flex for local alignment, documents codepen examples and slides, explains browser support (IE legacy spec origin, flags in Chrome/Firefox) and practical fallback via CSS feature queries.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 1:26The new CSS for Layout
3. 3:44Separation of source and display
4. 10:07Control of alignment
5. 12:09Responsive by default
6. 15:12The CSS Grid Layout fr unit

" related talks

• 51mCreative CSS LayoutMichelle Barker · CSS Day 2022
• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 30mSolving layout problems with CSS Grid and friendsRachel Andrew · Nordic.js 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 32mFlexbox & Grid How to Style with styleBrian Barrow, Josh Holladay · UtahJS Conf 2017
• 30mSolving Layout Problems with CSS Grid and FriendsRachel Andrew · View Source 2017
• 31m"CSS3 Layouts: Flexbox vs CSS Grid"Sara Vieira · Codemotion Milan 2015
• 42mSmartWeb 2016 - Rachel AndrewRachel Andrew · SmartWeb 2016