{"id":28950,"date":"2023-01-13T12:42:52","date_gmt":"2023-01-13T20:42:52","guid":{"rendered":"https:\/\/coderpad.io\/?p=28950"},"modified":"2023-06-07T13:39:00","modified_gmt":"2023-06-07T20:39:00","slug":"tailwind-grid-css-classes-a-how-to-guide","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/tailwind-grid-css-classes-a-how-to-guide\/","title":{"rendered":"Tailwind Grid CSS Classes: A How-to Guide"},"content":{"rendered":"\n

CSS grid<\/a> layout is a great way to keep your web content organized using a system of rows and columns. <\/p>\n\n\n\n

In this post, you’ll learn how to use Tailwind Grid CSS classes to build web components. We’ll also cover how you can easily resize the rows and columns, and how to make the grid responsive. <\/p>\n\n\n\n

Tailwind CSS<\/a> is a utility-first, low-level CSS framework that allows you to build web components directly into your HTML. It’s different from other CSS frameworks, like Bootstrap, that have predefined web components. <\/p>\n\n\n\n

What Tailwind provides is utility classes that will let you build more custom components. <\/p>\n\n\n\n

Tailwind grid CSS classes<\/strong><\/h2>\n\n\n\n

There are several grid utility classes available in Tailwind, and you’ll find them all in the documentation. <\/p>\n\n\n\n

In plain CSS, if you want an element to be in a grid, you’ll use the display<\/code> property and set it to grid<\/code>. The equivalent to this in Tailwind is simply using the grid<\/code> utility class. You’ll find this in the layout section of the documentation. <\/p>\n\n\n\n

Give this class to the components you want in a grid, and it adds the CSS display: grid;<\/code> property to the components. <\/p>\n\n\n\n

How to create rows and columns<\/strong><\/h2>\n\n\n\n

In plain CSS, the grid-template-columns<\/code> property lets you specify the number of columns you want in the grid. With Tailwind, you’ll use the grid-cols-{n}<\/code> class, with “n” being the number of equal-sized columns. <\/p>\n\n\n\n

In the same way, you can use the grid-rows-{n}<\/code> utility class when you want to add rows to the grid. This is in place of the grid-template-rows<\/code> CSS property. <\/p>\n\n\n\n

To illustrate, we’re going to build a simple container with a few elements inside it and display it in a grid layout. <\/p>\n\n\n\n

Let’s get started! <\/p>\n\n\n\n

We’re going for a 3-by-3 grid with nine grid items and also adding a gap between each cell with the gap-{size}<\/code> class. <\/p>\n\n\n

<div<\/span> class<\/span>=\"min-h-screen flex items-center justify-center\"<\/span>><\/span>\n\u00a0 <div<\/span> class<\/span>=\"grid grid-cols-3 grid-rows-3 gap-4\"<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 1<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 2<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 3<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 4<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 5<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 6<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 7<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span>><\/span>Cell 8<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span>><\/span>Cell 9<\/div<\/span>><\/span>\n\u00a0 <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Since this particular example is a 3-by-3 grid, you can actually leave out the grid-rows-3<\/code> class and the result will be the same. <\/p>\n\n\n\n
In fact, with any number of grid items, you can specify a fixed number of rows or columns and the cells will automatically flow into the next grid line. <\/p>\n\n\n\n
At this point, you can style the items as you wish by adding some utility classes. For this example, we’ve added a background color and some padding. <\/p>\n\n\n\n
Here’s a screenshot of the grid: <\/p>\n\n\n
\n
\"\"\/
A web page with a red-400 tailwind background color. The web page has a grid with children labelled Cell 1 to Cell 9.<\/figcaption><\/figure>\n<\/div>\n\n\n
You\u2019ll notice the gap<\/code> class adds equal spacing between every cell in the grid. You can change this and have a different gap size between the rows and columns. <\/p>\n\n\n\n
The gap utility class for the columns is gap-x-{size}<\/code>, and for the rows it’s gap-y-{size}<\/code>. <\/p>\n\n\n
<div<\/span> class<\/span>=\"grid grid-cols-3 gap-x-3 gap-y-1\"<\/span>><\/span>\n\n\u00a0\u00a0<!-- cells --><\/span>\n\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"\"\/
A web page grid with 9 children and a small gap size between the columns and rows.<\/figcaption><\/figure>\n<\/div>\n\n\n
Grid column and row start\/end<\/strong><\/h2>\n\n\n\n
The size of the grid items can be increased so that they occupy multiple rows or columns. <\/p>\n\n\n\n
Tailwind has the grid column start\/end and grid row start\/end utilities to make this possible. These utility classes will go directly into the individual grid items, and they control the grid-column<\/code> and grid-row<\/code> CSS properties. <\/p>\n\n\n\n
Apart from resizing the cells, you can also choose where the rows and columns start. <\/p>\n\n\n\n
Spanning rows and columns<\/strong><\/h3>\n\n\n\n
To increase the size of a grid item so that it expands across multiple columns, you’ll use the col-span-{n}<\/code> class, with “n” being the number of columns you want that item to occupy. For the rows, the grid utility class is row-span-{n}.<\/code> <\/p>\n\n\n\n
Let’s see it in action. To illustrate, we’re going to create a masonry grid. A masonry grid is a grid where the cells don’t have a fixed height and length. <\/p>\n\n\n
<div<\/span> class<\/span>=\"grid grid-cols-3 gap-3\"<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"row-span-3 bg-white p-3 rounded-md\"<\/span>><\/span>Cell 1<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"row-span-2 bg-white p-3 rounded-md\"<\/span>><\/span>Cell 2<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 3<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 4<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"col-span-2 bg-white p-3 rounded-md\"<\/span>><\/span>Cell 5<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 6<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 7<\/div<\/span>><\/span>\n \u00a0 \u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 8<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
And here’s a screenshot of the grid layout: <\/p>\n\n\n
\n
\"\"\/
A masonry grid comprising eight cells.<\/figcaption><\/figure>\n<\/div>\n\n\n
Starting and ending lines<\/strong><\/h3>\n\n\n\n
For the columns, the grid utility classes col-start-{n}<\/code> and col-end-{n}<\/code> are used to change the position of the columns. To change the start and end positions for the rows, you’ll use row-start-{n}<\/code> and row-end-{n}<\/code>. <\/p>\n\n\n
<div<\/span> class<\/span>=\"grid grid-cols-3 grid-rows-3 gap-3\"<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"col-start-2 bg-white p-3 rounded-md\"<\/span>><\/span>Cell 1<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 2<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 3<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 4<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 5<\/div<\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 6<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 7<\/div<\/span>><\/span>\n\u00a0 \u00a0 <div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 8<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
For this example, we want the first cell to start in the second column.<\/p>\n\n\n\n
\"\"\/
A grid with a defined start position.<\/figcaption><\/figure>\n\n\n\n
You can mix and match grid classes and get more interesting grid patterns.<\/p>\n\n\n\n
Auto grid placement<\/strong><\/h2>\n\n\n\n
Earlier, we mentioned how the grid items will auto-flow into the next line when you specify the number of columns or rows only. Defining both the number of columns and rows creates an explicit grid, and any overflow creates an implicit column or row. In Tailwind, there are grid auto-flow<\/a> utilities, grid-auto-{keyword}<\/code>, that control this placement of the grid items. <\/p>\n\n\n\n
Using the grid-auto-row<\/code> function makes any extra cell overflow into a new row outside the explicit grid lines. This is the default if no auto-flow class is added. <\/p>\n\n\n\n
In the same way, using the grid-auto-col<\/code> class adds the extra cells in a new column.<\/p>\n\n\n\n
\"\"\/
A grid child overflowing into a new row outside the explicit grid lines.<\/figcaption><\/figure>\n\n\n\n
The grid-auto-dense<\/code> class makes the grid items attempt to occupy every available space in the grid. Adding the “dense” keyword to the grid-auto-row<\/code> and grid-auto-col<\/code> classes performs the same function but in the implicit rows or columns. The default, if you don’t add an auto-flow utility, is grid-auto-row-dense<\/code>. <\/p>\n\n\n\n
There are also utilities for controlling the size of the implicit rows and columns. You’ll use the auto-cols-{size}<\/code><\/a> class for the columns, and auto-rows-{size}<\/code><\/a> for the rows. <\/p>\n\n\n\n
Nesting grids<\/strong><\/h2>\n\n\n\n
A nested grid is a grid within a grid. That is, one of the grid items will be a smaller grid. <\/p>\n\n\n\n
It’s a pretty straightforward process to create a nested grid. First, you’ll build the bigger grid. Then, within one of the cells, build another grid. <\/p>\n\n\n
<div<\/span> class<\/span>=\"grid grid-cols-3 grid-rows-3 gap-3\"<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 1<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 2<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 3<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 4<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 5<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>\n\u00a0\u00a0    \u00a0\u00a0<div<\/span> class<\/span>=\"flex items-center justify-center\"<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0    <div<\/span> class<\/span>=\"grid grid-cols-2 gap-2\"<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0    <div<\/span> class<\/span>=\"bg-red-400 p-2 rounded-md\"<\/span>><\/span>1<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0   \u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-red-400 p-2 rounded-md\"<\/span>><\/span>2<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-red-400 p-2 rounded-md\"<\/span>><\/span>3<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-red-400 p-2 rounded-md\"<\/span>><\/span>4<\/div<\/span>><\/span>\n   \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div<\/span>><\/span>\n \u00a0\u00a0\u00a0    <\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0 <\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 7<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 8<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-3 rounded-md\"<\/span>><\/span>Cell 9<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"\/
A nested grid.<\/figcaption><\/figure>\n\n\n\n
Since there’s no predefined dimensions for the grid items in this example, every cell expands to match the width and height of the biggest content, which in this case is the smaller grid. <\/p>\n\n\n\n
Adding breakpoints<\/strong><\/h2>\n\n\n\n
Sometimes a large grid will not look good on smaller screens, so there’s a need to collapse it so it fits. This is possible by adding breakpoints for small, medium, and large screens. <\/p>\n\n\n
<div<\/span> class<\/span>=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3\"<\/span>><\/span>\n\u00a0\u00a0\u00a0 <div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 1<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 2<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 3<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 4<\/div<\/span>><\/span>\n \u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 5<\/div<\/span>><\/span>\n \u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 6<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 7<\/div<\/span>><\/span>\n\u00a0\u00a0\u00a0\u00a0<div<\/span> class<\/span>=\"bg-white p-5 rounded-md\"<\/span>><\/span>Cell 8<\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
For large screens, you’ll add the lg<\/code> modifier, and for medium screens, it’s md<\/code>. <\/p>\n\n\n\n
Now, you can choose to add an sm<\/code> modifier for small screens, but it’s not necessary, as the grid-cols-1<\/code> class will automatically be applied. <\/p>\n\n\n\n
Check out the sandbox below to see how it works:<\/p>\n\n\n\n\t