02 · CSS Grid

1. Named Grid Areas

grid-template-areas — header, sidebar, main, footer

header

main

2. auto-fill + minmax() Gallery

grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))

01

02

03

04

05

06

07

08

09

10

11

12

3. Dense Packing

grid-auto-flow: dense — varied span items fill gaps

2×2

1×1

2×1

1×1

1×2

1×1

2×1

3×1

1×1

2×2

1×1

1×1

2×1

1×1

4. Nested / Subgrid-style Layout

Outer 3-col grid; inner cards align columns via inherited grid

alpha

CSS Grid lets child items share the parent track sizing for perfect alignment across cards.

beta

Even when image heights differ, titles and bodies stay aligned across columns.

gamma

Subgrid propagates the parent's row tracks into the child grid context.