Modern CSS Layout is Awesome!
summary
Shows working patterns not promises and demos that actually run in Chromium and Edge, including a CSS-only animated grid track and popovers built with the popover API and no JavaScript, with a note about accessibility tradeoffs. Explains and uses container queries plus container-relative units and polyfill from the Chrome team, demonstrates the practical :has() parent selector, experiments with anchor positioning via position-try and anchor() and previews a masonry proposal, showing what is supported today and what still needs browser work.
AI-written summary · about
chapters (18)
- 0:00Modern CSS layout intro
- 1:33Aspect ratio & Flexbox
- 3:31Gap property
- 5:08Viewport units for mobile
- 7:24Overlay with inset
- 9:17Stacking with CSS Grid
- 10:26Intrinsic sizing
- 12:53Subgrid for alignment
- 14:26Responsive grids
- 18:23Container queries
- 21:55Card layouts with has
- 23:30Fluid typography
- 24:36Container-relative units
- 26:57Parent selector
- 28:02Future positioning
- 33:32Popover & animations
- 35:27Masonry layout
- 38:03Future & closing
