1. Bento Box Layout
A named-area grid with a large hero panel, stacked feature cards, and a wide footer card.
Hero Image
Feature 1
Feature 2
Feature 3
Wide Content
2. Overlapping Grid Items
A coordinate-based grid showing how placement lines and stacking order can create layered layouts.
Item 6
Item 7
Overlapping Item 8
3. Justify Items
This example shows how `justify-items` controls horizontal alignment inside each grid cell.
Item 9
Item 10
Item 11
4. Align Items
This example demonstrates how `align-items` controls vertical alignment inside each grid cell.
Item 12
Item 13
Item 14