The Bootstrap grid system is widely used by developers to make layout creation simple, especially for responsive layouts. Although in Tailwind CSS you don't have to write CSS rules from scratch because Tailwind CSS contains nearly all the built-in classes, many developers are now switching to it.
We will explain how to implement the same bootstrap grid system in Tailwind CSS if you are migrating from Bootstrap to that Tailwind css framework.
As with Bootstrap's grid system, which supports up to 12 columns by default, Tailwind CSS supports up to 12 columns by default when utilising Tailwind CSS grid template columns.
The columns of the Tailwind CSS grid template make use of CSS grid. In a grid layout, it is used to designate the columns.
Before beginning to learn about the tailwind CSS grid, let's review the bootstrap grid system. From there, we'll create the similar boostrap grid system in tailwind CSS.
How does a grid system work in Bootstrap?
<div class="container">
<div class="row g-1">
<div class="col-12 col-md-3">Column 1</div>
<div class="col-12 col-md-3">Column 2</div>
<div class="col-12 col-md-3">Column 3</div>
</div>
</div>
In the example above, we added the column class col-12 col-md-3 to generate 3 columns on a medium to extra-large screen. On medium and large screens, the content is split into three columns; on small screens, it takes up the full screen.
What is Bootstrap container class?
Containers are the most core layout component in Bootstrap and are necessary when using Bootstrap's built-in grid system. Containers are used to contain, pad, and centre the content inside them.
What is Bootstrap row class?
Use Bootstrap's row class to hold the column class. Rows should always be contained in a bootstrap container class because it is used to separate content horizontally. The website must use the bootstrap row class to create a horizontal layout. Each bootstrap row contains twelve columns.
What is Bootstrap column class?
Bootstrap column classes are used to vertically organize content; column classes should always be contained within a bootstrap row class. To build a vertical layout, the website needs use the bootstrap column class. The grid structure in Bootstrap allows for up to 12 columns across the page. If you don't want to use all 12 columns separately, you can combine them to make bigger columns.
How do I make a Tailwind CSS grid?
Let's use Tailwind CSS to recreate the Bootstrap grid system.
Tailwind responsive grid example
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-1">
<div class="col-span-12 md:col-span-3">Column 1</div>
<div class="col-span-12 md:col-span-3">Column 2</div>
<div class="col-span-12 md:col-span-3">Column 3</div>
</div>
</div>
In the previous bootstrap example, we set up three columns, starting at a medium-sized screen and ending with an extra-large screen, and one column for a small screen. To accomplish the same thing in Tailwind, we added md col-span-3 These classes use three equal columns for medium to extra-large screens, whereas small screens use col-span-12, which covers full-screen in single columns. The following is the syntax: {screen}:col-span-{size}
How do I center content in Tailwind?
In Bootstrap, container contents are automatically centred, but in Tailwind CSS containers, content is not automatically centred. To create a center-aligned layout in Tailwind CSS, add the mx-auto class to the container class. This class means that margins to the left and right are automatically calculated, and content is pulled to the centre.
How do you make a grid in tailwind?
Tailwind comes with the grid-template-column utility by default, allowing you to build simple grids with up to 12 columns of equal width or using the grid-cols-{size} and col-span-{size} utilities in Tailwind CSS, you can create a grid system.
How do you give a gap in tailwind?
To add space between rows and columns in a grid layout, Tailwind CSS uses the gap class. The Bootstrap "g" (gutter) class is equivalent to the Tailwind CSS gap class. Change the space between rows and columns simultaneously in grid and flexbox layouts by using the gap-{size} property. For independent adjustment of the spacing between rows and columns, use the properties gap-x-{size} and gap-y-{size}. If you want to set no spacing between columns and rows, use gap-0 where {size} is any value.
Tailwind CSS grid another example
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12">Column</div>
<div class="col-span-6">Column</div>
<div class="col-span-6">Column</div>
</div>
</div>
In the above tailwind grid example, we set the parent grid-cols-12, which means we are using the entire screen, and in the child, the first element class is col-span-12, which means we are using the entire parent grid-cols-12 screen. The second and third element is col-span-6, which means we are arranging two elements with equal length inside the parent grid-cols-12 by diving into 6 column and 6 column, 6 (child: col-span-6)+6 (child: col-span-6)=12(parent: grid-cols-12).
How do I put a grid inside another grid in Tailwind CSS?
Tailwind css nested grid is one grid inside another grid.
Example for to create nested grid column with tailwind
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12">Column 1</div>
<div class="col-span-8">
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12 lg:col-span-6">Nested Column 1</div>
<div class="col-span-12 lg:col-span-6">Nested Column 2</div>
</div>
</div>
<div class="col-span-4">Column 3</div>
</div>
</div>
How do you create a bootstrap-like grid in Tailwind CSS flexbox grid?
As you may be aware, Bootstrap's grid system comes standard with six responsive divisions and support for up to 12 columns. With the use of flexbox in Tailwind CSS, you can create up to 12 columns with 6 responsive divisions.
Now, the question is: Using Tailwind CSS flexbox, how can I make a grid system?
Let's use Tailwind to create a grid system similar to Bootstrap.
<div class="container mx-auto">
<div class="flex flex-wrap lg:flex-nowrap lg:flex-row gap-1">
<div class="flex-1 basis-full lg:basis-1/3 p-3">Column</div>
<div class="flex-1 basis-full lg:basis-1/3 p-3">Column</div>
<div class="flex-1 basis-full lg:basis-1/3 p-3">Column</div>
</div>
</div>
The flex-wrap class was used in the above code to wrap the child items onto the next line, and targeted till the medium screen device. This is because space is not enough on small to medium-sized screens, thus we don't want three columns in a single row.
Remove this "lg:flex-nowrap" class if you prefer 3 columns on small to large screens.
We are not wrapping the elements on large screens. We included the "lg:flex-row" class since we wanted 3 columns in a single row.
This flex-1 class is used to allow flex items to stretch and shrink based on their initial size.
The Tailwind CSS class CSS rule for "basis-full" is flex-basis:100%, and it will set the flex item size to 100%. Because we want a 100% item size, we're adding this class to the small to medium screen.
The Tailwind CSS class CSS rule for "basis-full" is flex-basis:100%, and it will set the flex item size to 100%. Because we want a 100% item size, we're adding this class to the small to medium screen.
This lg:basis-1/3 class is added to the large-screen device. "flex-basis: 33.333333%" is the CSS rule for "lg:basis-1/3." In this case, we're making three items in a flexbox. The size of each item is 33.33% of the total screen size.
Let us look at another example of a tailwind grid system.
Now we're making six flexbox items.
<div class="container mx-auto">
<div class="flex flex-wrap lg:flex-nowrap lg:flex-row gap-1">
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-1</div>
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-2</div>
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-3</div>
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-4</div>
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-5</div>
<div class="flex-1 basis-full lg:basis-1/12 p-3">Column-6</div>
</div>
</div>
Tailwind grid-template-columns
To create simple grids with up to 12 equal width columns, Tailwind includes grid-template-column utilities by default. For example, grid-cols-4 creates 3 equal columns in a child element, but we've already shown you how you can customise each column with a different width.
<div class="container mx-auto">
<div class="grid grid-cols-3 lg:grid-cols-2 gap-1 ">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
</div>
</div>
In the above example, each column is divided into 3 equal spaces on small to medium screens and 2 equal spaces on large to above-average screens.
How do you make a Tailwind grid responsive?
All we need to do to create a responsive grid is add breakpoints to our grid element. Remember that Tailwind is mobile-first. Here, we can set the different column sizes for different screen breakpoints by setting, for instance, grid-cols-12 to achieve the full screen on small screens. Apply the grid-cols-4 utility to medium to large screen sizes by using md:grid-cols-3.
Does tailwind have a grid system?
Yes, you can create a grid system in Tailwind CSS by using the grid-cols-{size} and col-span-{size} utilities, as we have already explained and shown you in the example above.
