How to use Tailwind CSS grid?

Ever since The State of CSS survey launched in 2019, a single framework has dominated the survey. It's none other than Tailwind CSS, a utility-first CSS framework that allows you to write more concise and maintainable CSS code in mobile-first way.

In this blog, we will explore the Tailwind grid system, including grid-cols for column customization, and explore tools like the Tailwind grid generator to simplify complex layouts. By the end, you'll be able to build complex, responsive Tailwind grids by yourself.

If you want to understand how flexbox works in Tailwind, I have written a separate article on that.

Prerequisites and assumptions

This is not a tutorial that explains Grid layout in CSS or Tailwind CSS. I presume you already are familiar with both and have worked with them in the past. This blog explains how to effectively use the grid layout in Tailwind CSS.

In case you want to brush up on them, here are good starting points:

• Tailwind CSS documentation
• CSS grid cheatsheet

Also, the images added in each section have some basic CSS to improve aesthetics. Hence, if you copy the provided code into your file, it’ll display a bit differently than the screenshot. The code is more accurate than the images.

Setting up Grid Layout in Tailwind

The fundamental class in Tailwind CSS for creating a grid is the grid class. This transforms any container into a grid layout. It's equivalent to display: grid; in CSS.

<div class="grid grid-cols-3 gap-4">
	<div class="bg-blue-200">1</div>
	<div class="bg-blue-300">2</div>
	<div class="bg-blue-400">3</div>
</div>

This creates a simple three-column grid layout with equally spaced items. The gap-4 class adds spacing between the grid items. Let’s break down the core classes here:

• grid: Defines the container as a grid.
• grid-cols-3: Divides the container into three equal columns.
• gap-4: Adds spacing of 16px between the items.

Tailwind Grid Columns (grid-cols-*)

You can customize the number of columns in a grid with the grid-cols-n class, where n can range from 1 to 12, depending on the layout requirements. You can modify these numbers, or add more in tailwind.config.ts file. We'll talk more about this in a separate section of this blog.

<div class="grid grid-cols-4 gap-2">
	<div class="bg-red-200">A</div>
	<div class="bg-red-300">B</div>
	<div class="bg-red-400">C</div>
	<div class="bg-red-500">D</div>
</div>

Here, grid-cols-4 creates a grid with four equal columns (1fr each).

Spanning Columns and Rows (col-span-n)

Sometimes, you might want an item to span across multiple columns or rows. Tailwind provides col-span-n and row-span-n for this purpose.

<div class="grid grid-cols-3 gap-4">
	<div class="col-span-2 bg-green-300">Spans 2 Columns</div>
	<div class="bg-green-400">Normal Item</div>
</div>

• col-span-2: This class tells the first item to span across two columns.

You can similarly use row-span-n to control row spanning.

Starting and Ending at Specific Columns or Rows (col-start-* and col-end-*)

In certain scenarios, controlling the exact position of a grid item is necessary. Tailwind provides col-start-n, col-end-n, row-start-n, and row-end-n to place items precisely where you need them.

<div class="grid grid-cols-4 gap-4">
	<div class="col-start-2 col-end-4 bg-yellow-300">
		Starts at column 2, ends at column 4
	</div>
	<div class="bg-yellow-400">Normal Item</div>
</div>

• col-start-2: Starts the grid item at the second column.
• col-end-4: Ends the item at the fourth column.

Similarly, you can control rows with row-start-n and row-end-n.

Grid Rows in Tailwind (grid-rows-*)

Tailwind also allows you to control rows in a grid using the grid-rows-n class. This sets the number of rows in a grid, similar to how grid-cols-n controls columns.

<div class="grid grid-rows-3 gap-4">
	<div class="bg-indigo-300">Row 1</div>
	<div class="bg-indigo-400">Row 2</div>
	<div class="bg-indigo-500">Row 3</div>
</div>

Auto Layout with Grid (grid-cols-auto and grid-rows-auto)

For automatic layout based on content, Tailwind provides classes such as grid-cols-auto and grid-rows-auto. These automatically size the columns and rows based on the content inside.

<div class="grid grid-cols-auto gap-2">
	<div class="bg-pink-200">Auto Column 1</div>
	<div class="bg-pink-300">Auto Column 2</div>
</div>

Using Fractions (fr) in Grid

Tailwind allows you to define columns and rows using the fraction unit (fr), which provides a flexible way to distribute space.

<div class="grid grid-cols-[2fr_1fr] gap-4">
	<div class="bg-teal-300">2/3 Width</div>
	<div class="bg-teal-400">1/3 Width</div>
</div>

In this example, the first column takes up twice as much space as the second column.

Using Tailwind for Grid Flow (grid-flow-*)

The grid-flow-* class determines how content flows in the grid. You can use grid-flow-row, grid-flow-col, grid-flow-row-dense, or grid-flow-col-dense.

Let’s look at each class and understand how it renders the items on the screen.

grid-flow-col

The grid-flow-col class changes the layout so that items flow into columns from left to right, instead of rows. This means the grid will fill from top to bottom in each column.

<div class="grid grid-rows-3 grid-flow-col gap-4">
	<div class="row-span-2 bg-green-300 h-16">1 - Row span 2</div>
	<div class="bg-green-400 h-16">2</div>
	<div class="bg-green-500 h-16">3</div>
	<div class="bg-green-600 h-16">4</div>
	<div class="row-span-3 bg-green-700 h-16">5 - Row span 3</div>
	<div class="bg-green-800 h-16">6</div>
</div>

grid-flow-row

The grid-flow-row class is the default behavior in a grid layout. It arranges grid items in rows from top to bottom, left to right, without trying to fill gaps. This is the natural flow of the grid.

<div class="grid grid-cols-3 grid-flow-row gap-4">
	<div class="col-span-2 bg-red-300 h-16">1 - Col span 2</div>
	<div class="bg-red-400 h-16">2</div>
	<div class="bg-red-500 h-16">3</div>
	<div class="bg-red-600 h-16">4</div>
	<div class="col-span-3 bg-red-700 h-16">5 - Col span 3</div>
	<div class="bg-red-800 h-16">6</div>
</div>

grid-flow-row-dense

This class tells the grid layout to prioritize filling empty spaces in rows (from top to bottom), allowing items to shift to earlier rows if there is room. This is part of a dense packing algorithm, which tries to pack items more tightly by filling up available space, rather than leaving gaps.

<div class="grid grid-cols-3 grid-flow-row-dense gap-4">
	<div class="col-span-2 bg-yellow-300 h-16">1 - Col span 2</div>
	<div class="bg-yellow-400 h-16">2</div>
	<div class="bg-yellow-500 h-16">3</div>
	<div class="bg-yellow-600 h-16">4</div>
	<div class="col-span-3 bg-yellow-700 h-16">5 - Col span 3</div>
	<div class="bg-yellow-800 h-16">6</div>
</div>

grid-flow-col-dense

This class works similarly to grid-flow-row-dense, but instead, it focuses on columns (from left to right). It will attempt to move items to earlier columns if there’s space available, rather than filling row by row.

<div class="grid grid-rows-3 grid-flow-col-dense gap-4">
	<div class="row-span-2 bg-blue-300 h-16">1 - Row span 2</div>
	<div class="bg-blue-400 h-16">2</div>
	<div class="bg-blue-500 h-16">3</div>
	<div class="bg-blue-600 h-16">4</div>
	<div class="row-span-3 bg-blue-700 h-16">5 - Row span 3</div>
	<div class="bg-blue-800 h-16">6</div>
</div>

Tailwind Custom Grid Templates

You can create custom grid structures using Tailwind’s square bracket notation for more control over column and row sizes.

<div class="grid grid-cols-[minmax(100px,_1fr)_2fr] gap-4">
	<div class="bg-purple-300">100px to 1fr</div>
	<div class="bg-purple-400">2fr</div>
</div>

This creates a grid where the first column is at least 100px wide but can grow up to 1fr, while the second column takes up 2fr of the available space.

Similarly, you can extend base classes in tailwind.config.ts file to support more classes.

Tailwind Responsive Grid Layout

Responsive grids are a crucial feature in modern web design. Tailwind makes this simple with responsive classes like sm:grid-cols-n, md:grid-cols-n, lg:grid-cols-n, and xl:grid-cols-n.

<div
	class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
>
	<div class="bg-blue-200">Item 1</div>
	<div class="bg-blue-300">Item 2</div>
	<div class="bg-blue-400">Item 3</div>
	<div class="bg-blue-500">Item 4</div>
</div>

In this layout:

• grid-cols-1: For small screens (mobile).
• sm:grid-cols-2: For small devices like tablets.
• md:grid-cols-3: For medium screens (laptops).
• lg:grid-cols-4: For larger displays (desktops). This ensures a fully responsive grid that adjusts across various screen sizes.

Tailwind Grid Generators

There are plenty of tools available for generating complex Tailwind grid layouts. A Tailwind grid generator can save time by allowing developers to visually create grids and copy the corresponding Tailwind classes.

Here are some of such tools I’ve tried:

• Tailwind Gen
• Tailwind Grid Generator
• Tailwind Grid Generator by Folge Free Tools

Wrapping up

In this blog, we've explored the various ways to utilize CSS Grid within Tailwind CSS, from setting up basic grids to creating complex, responsive layouts. Tailwind provides a robust set of predefined utility classes that make working with grid so much easier. We also saw some grid generator tools that simplify creating complex grid layouts.

I hope you found this blog helpful. If you did, share this with your peers and communities so they can learn from it as well. I’d also love to know if it helped you. I am most active on Peerlist and Twitter. Feel free to ping me.

And if you are looking for a Frontend Developer Jobs, you will find many good opportunities on Peerlist Jobs. Don't forget to check them out.

Until then, keep building! 👨‍💻