Web Platform · Cluster
CSS Layout
Box model, flow, flex, and grid.
- 01 Adjoining Margins and the Block Formatting Context How block-level boxes stack in normal flow, when adjacent vertical margins merge into a single offset, and why establishing a formatting context stops the merging.
- 02 Used Values and the Containing Block How a declared width becomes a pixel length: which box the percentages resolve against, what box-sizing changes, and how auto margins and min-max constraints are resolved.
- 03 Line Box Construction and the Inline Formatting Context How inline-level boxes are packed into line boxes, what the strut contributes to line height, and why baseline alignment produces gaps that padding cannot remove.
- 04 Positioning and Stacking Contexts How out-of-flow boxes resolve their offsets, which ancestor supplies their containing block, and how z-index orders boxes through nested stacking contexts.
- 05 Intrinsic Sizing and Aspect Ratio What min-content, max-content and fit-content mean numerically, how replaced elements report their natural size, and how aspect-ratio transfers a definite dimension across axes.
- 06 Flex Basis, Free Space, and the Grow-Shrink Algorithm How a flex container assigns base sizes, computes free space along the main axis, and resolves growth and shrinkage when items are clamped by minimums.
- 07 Grid Track Sizing and the fr Unit How the grid algorithm sizes tracks from intrinsic contributions, why 1fr has an automatic minimum, and how auto-placement fills the implicit grid.
- 08 Writing Modes and Logical Properties How writing-mode rotates the inline and block axes, what direction changes about line layout, and why logical properties resolve against a different rectangle than their physical counterparts.
- 09 Containment and Container Queries What each containment type isolates, why size containment is required for query containers, and how query units and content-visibility change the sizing of a subtree.
- 10 Alignment, Overflow, and Scroll Containers How alignment distributes free space inside a box, what overflow values do to the box model, and why one axis cannot stay visible when the other scrolls.