The Dark Side of the Grid
summary
CSS Grid is powerful but risky: visual reordering (explicit placement, order, auto-flow, template-areas) breaks DOM/tab/screen‑reader order and confuses keyboard and magnifier users; about 15.7% of people reportedly use keyboards on mobile. Browsers shipped Grid rapidly (Chrome/Firefox in March 2017, Edge Oct 17) but subgrid unsupported and display:contents bug in Chrome/Safari/Edge can remove elements from the accessibility tree. Old IE grid needs explicit placement; Autoprefixer fakes gaps with extra rows. Use progressive enhancement, test with keyboard across breakpoints.
AI-written summary · about
chapters (13)
- 0:00Start
- 1:07CSS Grid Layout?
- 3:15A Brief overview of Grids History
- 4:59Grid-related properties and value
- 7:09Visual Order
- 9:24Who uses the keyboard for navigation?
- 10:15Who uses screen readers for navigation?
- 12:00$ order property
- 15:49Our options
- 17:28So...what do we do?
- 25:14Properties: Level 1 vs. MS Spec
- 27:39Autoprefixer gotchas
- 30:55Responsible use of Grid
