How To Create a Responsive Grid Layout Using TailwindCSS?

I have been using TailwindCSS in bits and pieces over the past few months. Doing so, I was able to get a lot of things done quickly. I had been thinking about using it in a new project, for a while now, replacing my favorite Bootstrap framework.

I wanted to see how easy it actually was, as compared to my favorite. And the fact that everyone was talking about TailwindCSS, was another reason for me to be curious and try my hands out.

I started a new Laravel Project today in which, I decided to go ahead with TailwindCSS. While I am aware of how to do particular things using this new CSS framework, creating responsive layouts is a different thing altogether. In Bootstrap, it’s super easy, let’s see how is it in TailwindCSS.

Before we begin, if you want to follow along, create a new project and setup TailwindCSS. If you don’t know how to do that, read How To Create a New Project with TailwindCSS?

Creating a 2×2 Responsive Grid Layout Using TailwindCSS

What I was looking for was a simple grid with multiple cards placed side-by-side. In Bootstrap terminology, I was looking to create a 2×2 responsive grid that would become a 1×1 grid on mobile devices.

Using my usual approach, I would have created a row div and then multiple col-x divs for each column. Here, things were slightly different.

Here, all that I needed to do was define the grid lg:grid-cols-2 sm:grid-cols-1 gap-4 for various screen sizes and then place the content inside this div. The snippet is below:

<div class="grid lg:grid-cols-2 sm:grid-cols-1 gap-4">
                <div class="border-1 rounded-md shadow-sm shadow-lg px-3 py-4 my-4 mx-4">
                    <header class="w-full font-semibold bg-gray-200 text-gray-700 py-5 px-6 py-6 px-8 rounded-t-md">
                        Hello Header
                    </header>
                    <div class="body w-full p-6">
                        This is some body content.
                    </div>
                </div>

                <div class="border-1 rounded-md shadow-sm shadow-lg px-3 py-4 my-4 mx-4">
                    <header class="w-full font-semibold bg-gray-200 text-gray-700 py-5 px-6 py-6 px-8 rounded-t-md">
                        Hello Header
                    </header>
                    <div class="body w-full p-6">
                        This is some body content.
                    </div>
                </div>

                <div class="border-1 rounded-md shadow-sm shadow-lg px-3 py-4 my-4 mx-4">
                    <header class="w-full font-semibold bg-gray-200 text-gray-700 py-5 px-6 py-6 px-8 rounded-t-md">
                        Hello Header
                    </header>
                    <div class="body w-full p-6">
                        This is some body content.
                    </div>
                </div>

                <div class="border-1 rounded-md shadow-sm shadow-lg px-3 py-4 my-4 mx-4">
                    <header class="w-full font-semibold bg-gray-200 text-gray-700 py-5 px-6 py-6 px-8 rounded-t-md">
                        Hello Header
                    </header>
                    <div class="body w-full p-6">
                        This is some body content.
                    </div>
                </div>
            </div>

That’s all that I needed to do to create a responsive grid.

If you want to dissect the code, feel free to download it from Github, here.