“Don’t Use My Grid System”
summary
Argues that a bespoke grid system is usually unnecessary, shows Susy (a Sass grid generator) but admits not using it, and gives exact DIY math: percentage = target / context to compute widths and avoid gutters that complicate layouts. Demonstrates practical options — floats with padding gutters, Flexbox for single-axis relationships, CSS Grid for true two‑dimensional layouts using grid-template-areas, and custom properties to pass raw data (example: a scheduler mapping minutes to grid rows). Recommends start with Grid, use @supports fallbacks, and build tiny project-specific systems only when needed.
AI-written summary · about
chapters (22)
- 0:00Intro
- 1:27Table Layouts
- 2:39CSS is Awesome
- 3:46Dynamic Relationships
- 5:15Box Model
- 7:19The Flow
- 9:43Positioning
- 10:59Floats
- 16:39Grids
- 21:07Different Problems Different Abilities
- 26:07Grid Systems Are Overkill
- 29:26Custom Properties
- 35:30Flexbox Performance
- 35:58CSS grids
- 41:23Custom Properties with Grid
- 42:40Two Dimensions
- 42:53Flexibility
- 43:09Nesting
- 43:40Autogrids
- 44:09Grid by Example
- 45:39CSS Grid
- 47:27Questions
related talks
45mDon't Use My Grid System (or any others)
48mDon't Use My Grid System (or any others)
36mDynamic CSS: Layouts & Beyond
30mSolving layout problems with CSS Grid and friends
34mCSS Grids or: How I Learned to Stop Worrying and Love the New Spec
31mHow to use CSS grid today in the real world
30mSolving Layout Problems with CSS Grid and Friends
58mCSS Grid - What is this Magic?!