Modern CSS with Tailwind, 2nd Edition

Fewer Grid Columns on Small Devices

In general terms, the goal of a lot of responsive design is to simultaneously allow information to be stacked at small sizes and spread out into rows when the space exists at larger sizes. Exactly how you want to do this depends on your goal.

One possibility is that you have a set of card-like elements, something like the featured posts on a news site, where the data isn’t actually a table but a series of items laid out in a row.

In this case, you might want the items to fill the entire width of the screen but the number of items to vary based on the size of the screen. On a smartphone, you might want only one item across the screen; on a desktop, maybe four. So you can use something like this:

<div class="grid ...