Creating a Responsive Grid Layout Using Tailwind UI Kit

Maheen
5 min readOct 1, 2020

--

Hello, Bonjour, Hola!!!

How are ya?

Hope it's all going great. Today we’re going to cover how to create a responsive grid layout using TUK. It’s quite straightforward. As I have explained in my previous few articles, Tailwind UI Kit is basically LEGO for websites. It’s got more than 350 components to choose from and around 10 templates that have more than 50 screens to kickstart your next project.

Why TUK? All right. Seems like a fair question. Well, let’s say that you’re in the middle of a project and require, say, a table or a grid (keeping in line with this current article) for displaying products or showing information in a card format, or whether you need alerts for your application, TUK is your go-to for all your UI needs.

The first thing you need to do is set up TUK using a starter kit. We’ve already covered that in this medium.com/@maheen.alphasquad/tailwind-ui-kit-basic-setup-using-a-starter-kit-278fab0e8427 article. I’m assuming that you’ve done that, and if you have then you have also bought the license. If not, then you should really consider buying the license because it’s worth every 189 dollars of it. Now let’s go to the Explore section and scroll down to the Web Application UI section and then the Master Layouts sub-section because we very well can’t just have a bare grid on our page now, can we?

Choose a Boxed Layout from one of the 16 components available there.

The one we’re going with is Dark with Tabs on Grey BG and it already comes with a Grid of its own, so if you want to use that, that’s fine, or if you want to use another one from the Grids components, that’s fine as well. Whatever floats your boat. However, should you choose the latter, you’re going to have to remove the pre-existing grid code before you put in the new code.

For our convenience, we’re removing the pre-existing grid. It looks like this on the localhost now:

Now we’re going to add a grid to it. Go to the Grids section and choose from the 11 components present there. We’re going to use the 12 Col Grid for our convenience.

Here’s what the boilerplate on the localhost looks like now:

Once you’ve pasted the code in your index.js file, go to the Grid Cards section and choose one that you need from the 27 components present there. We’re going to go with this one, the Full Width 3 Section Card:

Copy its code and paste it in the Grid section where it says to do so. Now remove the h-24 before you add a card block and also remove the dotted border as well before you paste the code. Now once you’ve done that, this is what the responsive grid will look like:

We now have a dashboard and a grid, like so:

And it’s responsive too:

Now let’s have some fun with it. We’re going to add more grid cards to a new page that we’re going to build.

First thing first, we’re going to pick a Box Model that we’re going to use. This part is the same as above, but we’ll reiterate it for reiteration’s sake.

I like this one, so I’m going to go with it:

The next thing we’re going to do is put a grid card in this boxed layout’s grid area, like so:

Pretty simple, right? Follow the instructions in the comments to make sure that you don’t accidentally do something weird.

Now we move on to adding another grid card:

Then we add an 8x4 column grid that we’ll populate with two grid cards:

This is the first card that we’re going to use on the left, i.e. the 8:

And this is the card that we’re going to use on the right, i.e. the 4:

I think that’s quite enough grid cards for one page, don’t you? By now your page should be looking like this:

And the best part about is that it’s completely responsive. Here’s how it looks on the iPad:

And on the iPhone:

I hope you got the hang of it and that it helped you out.

Have you tried TUK yet. No? Then its time to check it out. Click on the link:

Thanks for reading.

--

--

Maheen
Maheen

Written by Maheen

Believe in turning dreams into vision and vision into reality. A devRel, coding girl, and a strong supporter of messy hair and sweatpants.

No responses yet