---
title: "Tailwind Grid CSS Classes: A How-to Guide | CoderPad"
description: "Grids are a great way to keep your web content organized. You'll learn how to use Tailwind Grid CSS classes in this article."
canonical: "https://coderpad.io/blog/development/tailwind-grid-css-classes-a-how-to-guide/"
last_modified: "2026-04-15 16:20:59"
---
[Back to blog](https://coderpad.io/blog/)

# Tailwind Grid CSS Classes: A How-to Guide

January 13, 2023 6 Minute Read

By Oscar Jite-Orimiono

[Development](https://coderpad.io/blog/development/)

[CSS grid](https://coderpad.io/blog/development/a-very-very-in-depth-guide-on-css-grid/) layout is a great way to keep your web content organized using a system of rows and columns.

In this post, you’ll learn how to use Tailwind Grid CSS classes to build web components. We’ll also cover how you can easily resize the rows and columns, and how to make the grid responsive.

[Tailwind CSS](https://tailwindcss.com/) is a utility-first, low-level CSS framework that allows you to build web components directly into your HTML. It’s different from other CSS frameworks, like Bootstrap, that have predefined web components.

What Tailwind provides is utility classes that will let you build more custom components.

## Tailwind grid CSS classes

There are several grid utility classes available in Tailwind, and you’ll find them all in the documentation.

In plain CSS, if you want an element to be in a grid, you’ll use the`display`property and set it to`grid`. The equivalent to this in Tailwind is simply using the`grid`utility class. You’ll find this in the layout section of the documentation.

Give this class to the components you want in a grid, and it adds the CSS`display: grid;`property to the components.

## How to create rows and columns

In plain CSS, the`grid-template-columns`property lets you specify the number of columns you want in the grid. With Tailwind, you’ll use the`grid-cols-{n}`class, with “n” being the number of equal-sized columns.

In the same way, you can use the`grid-rows-{n}`utility class when you want to add rows to the grid. This is in place of the`grid-template-rows`CSS property.

To illustrate, we’re going to build a simple container with a few elements inside it and display it in a grid layout.

Let’s get started!

We’re going for a 3-by-3 grid with nine grid items and also adding a gap between each cell with the`gap-{size}`class.

```
<div class="min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-3 grid-rows-3 gap-4">
    <div>Cell 1</div>
    <div>Cell 2</div>
    <div>Cell 3</div>
    <div>Cell 4</div>
    <div>Cell 5</div>
    <div>Cell 6</div>
    <div>Cell 7</div>
    <div>Cell 8</div>
    <div>Cell 9</div>
  </div>
</div>Code language: HTML, XML (xml)
```

Since this particular example is a 3-by-3 grid, you can actually leave out the`grid-rows-3`class and the result will be the same.

In fact, with any number of grid items, you can specify a fixed number of rows or columns and the cells will automatically flow into the next grid line.

At this point, you can style the items as you wish by adding some utility classes. For this example, we’ve added a background color and some padding.

Here’s a screenshot of the grid:

A web page with a red-400 tailwind background color. The web page has a grid with children labelled Cell 1 to Cell 9.

You’ll notice the`gap`class adds equal spacing between every cell in the grid. You can change this and have a different gap size between the rows and columns.

The gap utility class for the columns is`gap-x-{size}`, and for the rows it’s`gap-y-{size}`.

```
<div class="grid grid-cols-3 gap-x-3 gap-y-1">

  <!-- cells -->

</div>Code language: HTML, XML (xml)
```
A web page grid with 9 children and a small gap size between the columns and rows.

## Grid column and row start/end

The size of the grid items can be increased so that they occupy multiple rows or columns.

Tailwind has the grid column start/end and grid row start/end utilities to make this possible. These utility classes will go directly into the individual grid items, and they control the`grid-column`and`grid-row`CSS properties.

Apart from resizing the cells, you can also choose where the rows and columns start.

### Spanning rows and columns

To increase the size of a grid item so that it expands across multiple columns, you’ll use the`col-span-{n}`class, with “n” being the number of columns you want that item to occupy. For the rows, the grid utility class is`row-span-{n}.`

Let’s see it in action. To illustrate, we’re going to create a masonry grid. A masonry grid is a grid where the cells don’t have a fixed height and length.

```
<div class="grid grid-cols-3 gap-3">
    <div class="row-span-3 bg-white p-3 rounded-md">Cell 1</div>
    <div class="row-span-2 bg-white p-3 rounded-md">Cell 2</div>
    <div class="bg-white p-3 rounded-md">Cell 3</div>
    <div class="bg-white p-3 rounded-md">Cell 4</div>
    <div class="col-span-2 bg-white p-3 rounded-md">Cell 5</div>
    <div class="bg-white p-3 rounded-md">Cell 6</div>
    <div class="bg-white p-3 rounded-md">Cell 7</div>
    <div class="bg-white p-3 rounded-md">Cell 8</div>
</div>Code language: HTML, XML (xml)
```

And here’s a screenshot of the grid layout:

A masonry grid comprising eight cells.

### Starting and ending lines

For the columns, the grid utility classes`col-start-{n}`and`col-end-{n}`are used to change the position of the columns. To change the start and end positions for the rows, you’ll use`row-start-{n}`and`row-end-{n}`.

```
<div class="grid grid-cols-3 grid-rows-3 gap-3">
    <div class="col-start-2 bg-white p-3 rounded-md">Cell 1</div>
    <div class="bg-white p-3 rounded-md">Cell 2</div>
    <div class="bg-white p-3 rounded-md">Cell 3</div>
    <div class="bg-white p-3 rounded-md">Cell 4</div>
    <div class="bg-white p-3 rounded-md">Cell 5</div
    <div class="bg-white p-3 rounded-md">Cell 6</div>
    <div class="bg-white p-3 rounded-md">Cell 7</div>
    <div class="bg-white p-3 rounded-md">Cell 8</div>
</div>Code language: HTML, XML (xml)
```

For this example, we want the first cell to start in the second column.

A grid with a defined start position.

You can mix and match grid classes and get more interesting grid patterns.

## Auto grid placement

Earlier, we mentioned how the grid items will auto-flow into the next line when you specify the number of columns or rows only. Defining both the number of columns and rows creates an explicit grid, and any overflow creates an implicit column or row. In Tailwind, there are [grid auto-flow](https://tailwindcss.com/docs/grid-auto-flow) utilities,`grid-auto-{keyword}`, that control this placement of the grid items.

Using the`grid-auto-row`function makes any extra cell overflow into a new row outside the explicit grid lines. This is the default if no auto-flow class is added.

In the same way, using the`grid-auto-col`class adds the extra cells in a new column.

A grid child overflowing into a new row outside the explicit grid lines.

The`grid-auto-dense`class makes the grid items attempt to occupy every available space in the grid. Adding the “dense” keyword to the`grid-auto-row`and`grid-auto-col`classes performs the same function but in the implicit rows or columns. The default, if you don’t add an auto-flow utility, is`grid-auto-row-dense`.

There are also utilities for controlling the size of the implicit rows and columns. You’ll use the [`auto-cols-{size}`](https://tailwindcss.com/docs/grid-auto-columns) class for the columns, and [`auto-rows-{size}`](https://tailwindcss.com/docs/grid-auto-rows) for the rows.

## Nesting grids

A nested grid is a grid within a grid. That is, one of the grid items will be a smaller grid.

It’s a pretty straightforward process to create a nested grid. First, you’ll build the bigger grid. Then, within one of the cells, build another grid.

```
<div class="grid grid-cols-3 grid-rows-3 gap-3">
    <div class="bg-white p-3 rounded-md">Cell 1</div>
    <div class="bg-white p-3 rounded-md">Cell 2</div>
    <div class="bg-white p-3 rounded-md">Cell 3</div>
    <div class="bg-white p-3 rounded-md">Cell 4</div>
    <div class="bg-white p-3 rounded-md">Cell 5</div>
    <div class="bg-white p-3 rounded-md">
        <div class="flex items-center justify-center">
            <div class="grid grid-cols-2 gap-2">
                <div class="bg-red-400 p-2 rounded-md">1</div>
                <div class="bg-red-400 p-2 rounded-md">2</div>
                <div class="bg-red-400 p-2 rounded-md">3</div>
                <div class="bg-red-400 p-2 rounded-md">4</div>
            </div>
        </div>
     </div>
    <div class="bg-white p-3 rounded-md">Cell 7</div>
    <div class="bg-white p-3 rounded-md">Cell 8</div>
    <div class="bg-white p-3 rounded-md">Cell 9</div>
</div>Code language: HTML, XML (xml)
```
A nested grid.

Since there’s no predefined dimensions for the grid items in this example, every cell expands to match the width and height of the biggest content, which in this case is the smaller grid.

## Adding breakpoints

Sometimes a large grid will not look good on smaller screens, so there’s a need to collapse it so it fits. This is possible by adding breakpoints for small, medium, and large screens.

```
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
    <div class="bg-white p-5 rounded-md">Cell 1</div>
    <div class="bg-white p-5 rounded-md">Cell 2</div>
    <div class="bg-white p-5 rounded-md">Cell 3</div>
    <div class="bg-white p-5 rounded-md">Cell 4</div>
    <div class="bg-white p-5 rounded-md">Cell 5</div>
    <div class="bg-white p-5 rounded-md">Cell 6</div>
    <div class="bg-white p-5 rounded-md">Cell 7</div>
    <div class="bg-white p-5 rounded-md">Cell 8</div>
</div>Code language: HTML, XML (xml)
```

For large screens, you’ll add the`lg`modifier, and for medium screens, it’s`md`.

Now, you can choose to add an`sm`modifier for small screens, but it’s not necessary, as the`grid-cols-1`class will automatically be applied.

Check out the sandbox below to see how it works:

## That’s a wrap

You can place different kinds of content into a grid—from text to videos to images, grids keep everything nice and tidy.

Tailwind makes it very easy to create grid layouts through the use of its utility classes. You can specify the number of rows and columns, the size of the grid items, how they behave, and much more.

Grids can also be made responsive by adding in breakpoints, which do the work of CSS media queries.

Now that you know how to use Tailwind CSS grid classes, let’s see what you can create.

This post was written by Oscar Jite-Orimiono. [Oscar](https://omj.netlify.app/) has a B.Eng in mechanical engineering, but now he’s a self-taught frontend web developer and technical writer. His skills include HTML, CSS, and JavaScript(Vanilla and jQuery). He builds websites with a focus on them being user-friendly, responsive, and having pleasing aesthetics. He’s also interested in data science, Python, and SQL.

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)