Refactoring with CSS Grid
summary
Refactors a large content site to use CSS Grid while maintaining Internet Explorer support, replacing JavaScript and backend float hacks with a pure-CSS approach that uses CSS custom properties. Shows concrete fallbacks using @supports and stripped-down HTML for old browsers, cites production examples (The Guardian, Financial Times, Stripe) and usage stats (IE down to ~3%), and explains waiting-for features like display:contents and subgrid that would simplify forms and nested layouts.
AI-written summary · about
chapters (28)
- 0:00Introduction
- 0:59Progressive Enhancement
- 1:36Order Radius
- 2:21Modern Example
- 2:55Layout
- 3:10Back in 2016
- 4:05Internet Explorer
- 4:20Sidebar
- 4:32Make it look the same
- 5:08Why use CSS Grid
- 5:37Third example
- 6:53Edge stats
- 7:18Open Edge
- 7:52The Guardian
- 8:12Nature Calm
- 8:31Pure HTML
- 8:46Media Query
- 9:10IE vs Chrome
- 9:59Cross browser testing
- 10:19Browser Stack
- 11:14Cutting Mustard
- 11:49CSS without Grid
- 13:06Benefits of CSS Grid
- 13:56Form Elements
- 14:23Display Contents
- 14:59Edge Support
- 15:22SubGrid
- 16:49Grid vs Bridge
