Grid with Spanning Items (Gotcha Demonstration)

Gotcha: Grid items fill only one "cell" by default. To make an item span multiple columns or rows, use col-span-* or row-span-* on that specific grid item.

This grid uses grid grid-cols-3 gap-4 as its base.

Item 1
(Normal)

Item 2
(


      col-span-2

: Spans 2 columns)

Item 3
(Starts new row)

Item 4
(


      row-span-2

: Spans 2 rows)

Item 5
(Row 2, Col 3)

Item 6
(Row 3, Col 1)

Item 7
(Row 3, Col 3)

Item 8
(


      col-span-3

: Spans 3 columns on a new row)

Key Takeaway (Gotcha Explained):

Without col-span-* or row-span-* , each item ("Item 1", "Item 3", "Item 5", etc.) would occupy a single grid cell. The col-span-2 on "Item 2" makes it occupy the width of two standard cells. The row-span-2 on "Item 4" makes it occupy the height of two standard cells. This is crucial for creating more complex and asymmetrical layouts.