Grid system in Tailwind CSS


If you've used Bootstrap before, the Tailwind CSS grid can seem a bit confusing at the beginning. But actually it is very simple (maybe even simpler than the one in Bootstrap).

Unlike the default grid in Bootstrap, which is based on flexbox, the Tailwind CSS grid system is based on CSS grid.

Let's see what exactly this means in practice and how it works.

Basic example

Let's add the following code to the index.html file between the <main> tags:

As you can see, it's just an empty div with 12 other colored divs inside.

1
2
3
4
5
6
7
8
9
10
11
12

How do I turn this into a real grid, with 4 columns inside?

First, to the outer div we need to add a .grid class to enable the CSS Grid inside.

And although after adding this class and saving the file, nothing has changed visually, a lot has changed from the inside - from now on, we can use classes defining the number of columns in our wrapper.

For example, let's add the .grid-cols-4 class to create a four-column layout:

And after saving the file we should see charming 4 columns:

1
2
3
4
5
6
7
8
9
10
11
12

Play with it a bit. If you change the number in the class grid-cols-4 you will see how the numbers of columns are changing.

Change it, for example, to grid-cols-2 or grid-cols-6. You can set up to 12 columns.

And that's basically it, you have a working, basic grid! 🙌

Of course, there is much more - we need to learn how to make it responsive, how to set gaps, how to change the size of the columns, and many many more.

But let's not take it all at once. We will cover all the important topics in the future lessons.

Note: If you want to practice on your own and have a look at more examples you can play with our grid generator.




John Doe

About author

Michal Szymanski

Co Founder at Tailwind Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.