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>
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>
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>
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>
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>
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>
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>
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 (7)
its good, but you can easily use tw-bootstrap-grid-optimizer plugin,
all your problem will be fix with less coding and important thing is responsive of grid , to responsive your grid css always should to make some trick for that but with this package you can easily handle that
Yeah well. Ok if you want to have a grid.. but it falls short on the flex behavior bootstrap has. So for example if i have a 3 columns layout and 5 elements i can center the last 2 with justify-content-center. Which tailwind makes incredibly hard to do
Amazing! I was trying to find something to finally abandon bootstrap and this is it. Thanks!
This should be in the official tutorial. The docs only talks about each API but not how to use them combined. Thanks.
<3 needed this so badly
Superb, straight to the point and great code examples!
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.