SmartWeb 2016 - Rachel Andrew
summary
Introduces concrete CSS techniques: using Flexbox for one-dimensional layouts, Grid for two-dimensional placement, and Box Alignment for centering and spacing; demonstrates grid-auto-flow: dense to backfill image-gallery gaps, the new fr unit for proportional columns, and @supports feature queries to progressive-enhance layouts. Shows minmax(auto) and grid-auto-rows(minmax(150px, auto)) to avoid layout breakage when CMS content grows, warns that visual reordering can break tab order for accessibility, and links working demos on CodePen; expects cross‑browser Grid adoption soon.
AI-written summary · about
chapters (8)
- 0:00Introduction and CSS history
- 3:55CSS Grid and Flexbox overview
- 13:13CSS Box Alignment module
- 20:16Responsive design and layout evolution
- 27:45Grid and Flexbox in practice
- 32:00Browser support and feature queries
- 37:55Learning and contributing to CSS specs
- 41:51Q&A and closing
related talks
29mLaying Out The Future With Grid And Flexbox
01h 40mUser Interfaces in the Age of Intrinsic Web Design
51mCreative CSS Layout
43mSolving Layout Problems With CSS Grid and Friends
30mStart Using CSS Grid Layout Today
14mInterview with Rachel Andrew
42mThe Magic You Have Been Missing in CSS Layouts
51mCSS GRID LAYOUT - PRACTICE TRICKS