Gotcha Reminder:
By default, grid items only fill one "cell". To make an item span multiple columns or rows, you need to use utility classes like
col-span-*
or
row-span-*
on that specific grid item.
col-span-2
)
row-span-2
)
col-span-2
. If this class was omitted, "Item 1" would only take up the first cell in the first row, and "Item 2" would shift to the second cell.
row-span-2
. If this class was omitted, "Item 4" would only occupy the cell in the second row, second column. "Item 6" and "Item 7" would then appear directly below "Item 3" and "Item 5" respectively in the second row.