Tailwind CSS Responsive Grid and Breakpoints, Part 3 of 5

This is part 3 of the Tailwind CSS series. So far we have one card on a grey background. A real page needs several cards, a sensible width, and a layout that works on a phone as well as a laptop. That is what this part is about: grids, containers, and breakpoints.

Here is a confession. For years I wrote media queries by hand: a block of CSS for mobile, another for tablets, and a third for desktops, all in a file I was afraid to touch. Tailwind’s breakpoint prefixes replaced that. Once you see how little code it takes, you will not go back.

Turn one card into a grid

Keep the card from part 2 and place three copies inside a grid. Replace the <article> wrapper with a container that holds the cards, and use these classes on the container:

<main class="mx-auto max-w-6xl px-4 py-12">
  <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
    <!-- three article cards go here -->
  </div>
</main>

Read that container out loud. grid-cols-1 means one column by default, which is what a phone gets. md:grid-cols-3 means three columns from the medium breakpoint upward, which is 768 pixels in Tailwind’s default scale. gap-6 puts a steady space between cards. mx-auto max-w-6xl centres the whole block and stops it stretching across a very wide screen.

Mobile first, always

A class with no prefix applies at every width. A class with a prefix applies at that width and above. So the default layout is the phone layout, and each prefix adds a change for wider screens. This is the reverse of how many people first learn responsive CSS, where you start from the desktop and shrink things down. Starting small usually means less to undo.

Test the grid at the edges

Most layout bugs live between breakpoints, not at them. Open your page and drag the browser window slowly from very narrow to very wide. Pay attention to the moment the layout jumps from one column to three: does the card text wrap badly, or does one card look taller than the rest? If a card looks wrong, the fix is usually a class on the card, such as h-full to fill the grid cell, rather than a change to the grid itself.

Browser developer tools have a responsive mode that lets you pick a device size. Use it for a quick check, but also try the in-between widths, because real phones and laptops rarely match a preset exactly.

Why the container matters on wide screens

Without a container, a grid stretches to the full width of a large monitor. Three cards become three very wide strips with a huge gap between them, and the text runs so long that it is hard to read. The max-w-6xl class caps the width at 72 rem, which is wide enough for three comfortable cards and narrow enough to keep the eye on one block.

Pair the cap with mx-auto. Auto margins split the leftover space evenly on each side, so the block sits in the middle of the screen. px-4 adds breathing room at the edges, which matters on phones where the content would otherwise touch the screen edge. Those three classes together form the container you will reuse on almost every page.

A quick check before you move on

Before part 4, confirm three things. The page has one column on a narrow window and three on a wide one. The cards keep the same height across each row. And the container stops the content from spreading to the edges of a very large monitor. If all three hold, your layout is in good shape, and every later part builds on it without needing changes here.

Keep going in the series

This series builds one project, so each part picks up where the last one stopped. Here are the other parts:

• Part 1: Set up Tailwind CSS v4 with Vite
• Part 2: Build your first card with utility classes
• Part 4: Buttons, states and a pricing card
• Part 5: Dark mode and a brand theme

Frequently asked questions