Grid Item Spanning & The "Gotcha"

This example demonstrates how grid items behave by default and how to make them span multiple columns or rows, addressing a common pitfall.

Default Behavior (The "Gotcha")

By default, each grid item occupies only a single "cell" in the grid. If you expect an item to be wider, it won't be unless you explicitly tell it to span.

Item A (Wider)

(Still 1 column wide)

Item B
Item C

Comment: Notice "Item A (Wider)" above only takes one cell. This is the default.

Using `col-span` and `row-span`

To make an item span multiple columns or rows, use utility classes like col-span-2 or row-span-2 on the specific grid item.

Item 1 (Spans 2 Columns - `col-span-2`)
Item 2
Item 3
Item 4 (Spans 2 Rows - `row-span-2`)

(Manually placed in col 3 for clarity)

Item 5 (Spans 2 Columns - `col-span-2`)

Comment: Here, "Item 1" and "Item 5" use col-span-2 to stretch across two columns. "Item 4" uses row-span-2 to stretch across two rows (its positioning is also helped by `col-start-3` and `row-start-1` for this specific layout).

Gotcha Addressed:

The "Gotcha" is that grid items only fill one cell unless explicitly instructed to span. We've shown this default behavior and then demonstrated the solution using col-span-* and row-span-* utilities.