Defining “auto”
summary
Layout engine work is broken into four phases: style computation, box tree construction, layout (reflow), and paint and the talk shows concrete rules used at each step: box nodes map DOM to rectangles, Gecko uses a frame constructor, width auto usually fills the containing block while height auto is content-driven, and flex basis: auto uses content size plus aspect ratio with an implied minimum = min-content for flex items. Practical rules cover shrink-to-fit behavior for floats/tables and when to use rem ch or viewport units and media queries.
AI-written summary · about
chapters (21)
- 0:00Start
- 1:07How Does Layout Engine Work
- 1:57Style Computation
- 2:41Selector Matching
- 3:23Compute the Values
- 3:48Line Height
- 4:57Box Tree
- 16:21Types of Sizing Primitives in Css
- 16:36Extrinsic Sizes
- 17:11Intrinsic Size
- 17:21Fixed Sizes
- 17:45Relative Units
- 18:16Viewport Units
- 18:41Extrinsic Sizing Fill
- 19:05Intrinsic Sizes
- 20:09Compound Sizes
- 21:10Shrink To Fit Formula
- 21:34Sizing Constraints
- 21:54Defining Auto
- 30:38Media Queries
- 35:04How Does Someone Get into Spec Writing
related talks
21mDesigning Auto Layout V4
32mBreaking Barriers: Understanding Layout Between UI Design and Code
50mFlexbox
27mChanging The Layout Game
42mUsing DevTools to Understand Modern CSS Layouts
22mDOM implementation techniques
30mSolving Layout Problems with CSS Grid and Friends
29mLaying Out The Future With Grid And Flexbox