DEV Community

Cover image for Day 4: How to Build a Responsive Grid Layout in Tailwind CSS
Ruqaiya Beguwala
Ruqaiya Beguwala

Posted on • Originally published at Medium

Day 4: How to Build a Responsive Grid Layout in Tailwind CSS

#tailwindcss #webdev #ui

Welcome to Day 4 of 15 Days of Tailwind Tips — a series dedicated to helping developers learn and apply Tailwind CSS in a simple, practical way. Today, we’re diving into one of the most powerful layout features in Tailwind: building responsive grid layouts.

By the end of this guide, you’ll know how to create responsive grids that adjust beautifully across screen sizes, without writing a single line of custom CSS.

Creating a Basic Grid Layout

Tailwind provides utility classes that make it easy to define grid columns using the grid-cols-* class. Here’s a simple 3-column layout:

<div class="grid grid-cols-3 gap-4"> <div class="bg-gray-200 p-4">Item 1</div> <div class="bg-gray-200 p-4">Item 2</div> <div class="bg-gray-200 p-4">Item 3</div> </div>
Enter fullscreen mode Exit fullscreen mode
  • grid: Defines the element as a CSS Grid container
  • grid-cols-3: Creates 3 equal-width columns
  • gap-4: Adds spacing between the grid items

You can replace grid-cols-3 with any number up to grid-cols-12 based on how many columns you need.

Making It Responsive with Breakpoints

The real strength of Tailwind’s grid system is how easily it responds to different screen sizes.

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div class="bg-white p-4 shadow rounded">Card 1</div> <div class="bg-white p-4 shadow rounded">Card 2</div> <div class="bg-white p-4 shadow rounded">Card 3</div> <div class="bg-white p-4 shadow rounded">Card 4</div> </div>
Enter fullscreen mode Exit fullscreen mode
  • grid-cols-1: Mobile-first (default for small screens)
  • sm:grid-cols-2: Two columns for screens ≥ 640px
  • md:grid-cols-3: Three columns for screens ≥ 768px
  • lg:grid-cols-4: Four columns for screens ≥ 1024px

Bonus: Use auto-fit and minmax with grid-cols-[...]

For more flexibility, you can use arbitrary values and CSS functions directly:

<div class="grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4"> <div class="bg-blue-100 p-4 rounded">Block A</div> <div class="bg-blue-100 p-4 rounded">Block B</div> <div class="bg-blue-100 p-4 rounded">Block C</div> </div>
Enter fullscreen mode Exit fullscreen mode

This creates a fluid layout where the number of columns adjusts based on the available space, ensuring items never shrink below 200px.

Advanced Tips & Tricks

1. Use auto-rows-fr to Create Equal-Height Rows

By default, grid rows auto-size based on content. If you want uniform row height, add this:

<div class="grid grid-cols-2 auto-rows-fr gap-4"> <div class="bg-gray-200 p-4">Row A</div> <div class="bg-gray-200 p-4 h-40">Row B</div> </div>
Enter fullscreen mode Exit fullscreen mode

Now both rows expand equally even if content size varies.

2. Combine grid with aspect-ratio for Responsive Cards

When building card layouts for galleries, you can pair grids with fixed aspect ratios:

<div class="grid grid-cols-2 gap-4"> <div class="bg-gray-300 aspect-[16/9] rounded">Card 1</div> <div class="bg-gray-300 aspect-[16/9] rounded">Card 2</div> </div>
Enter fullscreen mode Exit fullscreen mode

This ensures all grid items maintain a consistent aspect ratio, ideal for media layouts like video or product previews.

3. Grid vs Flex: When to Use What?

  • Use grid when you need a 2D layout — control over both rows and columns.
  • Use flex for 1D layouts — either horizontal (row) or vertical (column) alignment.

4. col-span-* and row-span-*

You can make items span multiple columns or rows easily:

<div class="grid grid-cols-3 gap-4"> <div class="col-span-2 bg-blue-100 p-4">Wider Item</div> <div class="bg-gray-100 p-4">Normal Item</div> </div>
Enter fullscreen mode Exit fullscreen mode

Great for dashboard widgets or masonry layouts.

5. Nesting Grids

You can nest a grid inside another grid item. This is super handy for UI cards that have both a header and body layout:

<div class="grid grid-cols-2 gap-4"> <div class="bg-white p-4 grid grid-rows-2 gap-2"> <div class="font-bold">Card Header</div> <div>Card content...</div> </div> </div>
Enter fullscreen mode Exit fullscreen mode

6. Combining grid with Tailwind’s Utility Classes

You can combine grid layout with:

  • overflow-hidden for scroll behavior
  • max-h-* or max-w-* for responsive containers
  • transition and hover: classes for animated grid elements

7. Useful Tailwind Grid Utility Roundup

Here’s a mini-cheat sheet:

Utility Purpose
grid-cols-N Define N columns
grid-rows-N Define N rows
col-span-N / row-span-N Span across N columns or rows
auto-rows-fr / auto-cols-fr Equal spacing for auto rows/cols
gap-N Equal gap between items
place-items-center Center content both ways in grid cells
aspect-[W/H] Maintain shape for grid items

Conclusion

Tailwind CSS makes building responsive grid layouts faster and more intuitive than traditional CSS. With just a few utility classes like grid-cols-*, gap-*, and breakpoint prefixes, you can create layouts that adapt seamlessly to any device.

Tomorrow in Day 5, we’ll explore how to add smooth hover transitions in Tailwind for interactive UI elements. Stay tuned!

Top comments (0)