Responsive Grid Columns Example

This example demonstrates how the number of items in a row changes based on screen size. It uses `grid-cols-1` for the smallest screens, `sm:grid-cols-2` for small screens and up, and `md:grid-cols-4` for medium screens and up.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

How it works:

grid : Establishes a grid container.
grid-cols-1 : Sets 1 column for the smallest screens (base).
sm:grid-cols-2 : Sets 2 columns for screens 640px wide and larger.
md:grid-cols-4 : Sets 4 columns for screens 768px wide and larger.
gap-4 : Adds spacing between grid items.

Resize your browser window to see the layout change.