Super Hero Layouts
summary
Recreates specific comic layouts (Golden age 1–3 panels, Bronze Age multi-row spans, Watchmen nine-panel) using CSS Grid with a calculated 16‑column baseline (36px smallest panel ÷ 576px page) and explicit grid-row/column placement to layer panels; preserves a single spanning image by using subgrid or display:contents plus a pseudo-element to simulate gutters; builds irregular shapes with clip-path and shape-outside; demos live on CodePen and work, though subgrid is currently limited to Firefox and Safari tech previews.
AI-written summary · about
chapters (13)
- 0:00Talk introduction
- 1:03Comic book ages evolution
- 6:24Golden Age CSS Grid
- 9:54Bronze Age storytelling
- 12:22Modern Age strict grids
- 20:56Layering panels for depth
- 26:57Accessibility in layouts
- 29:07Breaking boxy web designs
- 34:01Creative shapes with CSS
- 37:09Text wrapping with CSS Shapes
- 40:02International comic layouts
- 43:32Summary and future layouts
- 45:17Q&A
