Page 3
Advanced layout laboratory
Flexbox, grid, nesting, positioning, overlap, negative margins, sticky and overflow — each block labelled.
L-01 · Flexbox row, space-between, wrap
L-02 · Flex column, centered both axes
A
B (flex: 2)
C
D
Centered
L-03 · CSS grid with named areas & spans
L-04 · Auto-fit minmax grid (cards to reorder)
Area A (2×2)
Area B
Area C
Area D (span 2)
Card 2
Second in source order.
Card 3
Third in source order.
Card 1
First in source order.
L-05 · Nested containers (grid → flex → grid)
L-06 · Asymmetric 1fr / 2.6fr
Leaf 1
Leaf 2
Sibling
Outer sibling
Wide main column with longer content that wraps.
L-07 · Absolute / relative / z-index stack
L-08 · Negative margin overlap
L-09 · Sticky sidebar
z-index 1
z-index 3
z-index 2
Top block
Pulled up by −40px margin
Scroll content 1.
Scroll content 2.
Scroll content 3.
Scroll content 4.
Scroll content 5.
Scroll content 6.
Scroll content 7.
Scroll content 8.
L-10 · Width units: px / % / ch / vw (clamped) / min-max
L-11 · Overflow: hidden / scroll / ellipsis
240px
60%
30ch wide text box
clamp(200px, 40vw, 520px)
min 180 / max 420
Overflow hidden clips this long line of text that goes on and on beyond the box.
Overflow auto scrolls. Line one.
Line two.
Line three.
Line four.
Line five.
Line two.
Line three.
Line four.
Line five.
Ellipsis truncation on a single long line of text