DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Recreating Bootstrap Grid with Tailwind CSS Grids
Praveen Juge
Praveen Juge

Posted on

Recreating Bootstrap Grid with Tailwind CSS Grids

Bootstrap grid is powered by flexbox, it has a twelve column system, five default responsive tiers, and a mobile-first system.

Tailwind CSS grids are powered by CSS Grids, which technically can have however many columns, five responsive tiers, lots of gutter gap utilities and are easily customizable.

Let’s take the following bootstrap grid:

<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This will get us three columns like this,

We can recreate the same on tailwind by using this,

<div class="grid grid-cols-3">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

We are using the CSS grid there and splitting it into three columns by using Grid Template Columns tailwind utility.

CSS Grids doesn’t have any gutter space built in like bootstrap grid, but we can add that by using the gap utility like this,

<div class="grid grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Since these grid utilities are mobile-first by default, we have to add other cols utilities to make sure it looks good on mobile.

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Here, on the lowest device-width, everything would be on one column and after it hits the lg breakpoint it would be three columns.

We have utility classes for up to 12 columns so we can have a 12 column layout like bootstrap.

The same responsive classes could be used for gap utilities also. The gutter gap below would increase after it hits the lg breakpoint. Like this,

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

But, what if you want to change individual column sizes? You can do that with Grid Column utilities.


<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-2">Takes two columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

The above code uses grid column utility to make the first column take up two columns. And, this is also mobile first. So, if you want it to take up one column on mobile you can do the following,

<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-1 lg:col-span-2">Takes one column on mobile and two on desktop</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>
Enter fullscreen mode Exit fullscreen mode

And that’s the easiest way to create a bootstrap like the grid in the tailwind.

Here is the final tailwind playground:

https://play.tailwindcss.com/eAbd7eiQIY

You can learn more about CSS grids here or learn by playing this interactive tutorial.

Top comments (5)

Collapse
mattfreitas profile image
Matheus Freitas

Amazing! I was trying to find something to finally abandon bootstrap and this is it. Thanks!

Collapse
denctl profile image
Denislav Gavrilov πŸ‘¨β€πŸš€πŸ€–πŸ€·β€β™‚οΈ

Superb, straight to the point and great code examples!

Collapse
dwoodwardgb profile image
David Woodward

<3 needed this so badly

Collapse
sidrsingh profile image
sid-r-singh

This is awesome. I seriously feel this should be part of the official guide. I also learned a lot using the interactive tutorial. Thanks a lot.

Collapse
yifeikong profile image
Yifei Kong

This should be in the official tutorial. The docs only talks about each API but not how to use them combined. Thanks.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.