True Layout Finally Arrives

on YouTube ↗40m

" summary

Shows concrete CSS code and three live demos (same page implemented with floats, Flexbox and Grid) and claims Grid gives true two-dimensional Grid control; Flexbox remains one-dimensional and floats remain the most compatible fallback. Notes media queries, source ordering, and reordering via order with Flexbox, equal-height solving in Grid, and that Grid currently has zero browser support by default and works only behind flags and with buggy grid-gap percent behavior.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 3:15Floats
3. 7:55Flexbox
4. 14:05CSS4 Grid
5. 26:48Examples
6. 32:07Recommendations
7. 34:18Floats or Flexbox

" related talks

• 17mThe New CSS LayoutRachel Andrew · dotCSS 2015
• 29mStart Using CSS Grid Layout TodayRachel Andrew · Render Conference 2017
• 31m"CSS3 Layouts: Flexbox vs CSS Grid"Sara Vieira · Codemotion Milan 2015
• 29mLaying Out The Future With Grid And FlexboxRachel Andrew · CSSConf.Asia 2016
• 30mSolving layout problems with CSS Grid and friendsRachel Andrew · Nordic.js 2017
• 50mPresent and Future of CSS LayoutTab Atkins · CSS Day 2014
• 51mCreative CSS LayoutMichelle Barker · CSS Day 2022
• 32mFlexbox & Grid How to Style with styleBrian Barrow, Josh Holladay · UtahJS Conf 2017