This example explicitly sets `grid-cols-1` for the smallest screens, then changes the number of columns for `sm`, `md`, and `lg` breakpoints. Resize your browser window to see the changes.
grid
: Establishes a grid container.
grid-cols-1
: Default to 1 column on extra-small screens (mobile-first).
sm:grid-cols-2
: On small screens (640px and up), display 2 columns.
md:grid-cols-3
: On medium screens (768px and up), display 3 columns.
lg:grid-cols-4
: On large screens (1024px and up), display 4 columns.
gap-6
: Adds spacing between grid items.