CSS Grid is a layout system that works in a 2-dimensional grid system, as the name implies. It allows us to place items inside and across the various columns and rows we define inside the grid container, and is the most powerful and flexible CSS layout tool available to us today.

Grid is supported by Tailwind CSS, making it even easier to configure and manage grids in your applications by combining the flexibility and power of Grid with the simplicity and ease of use of Tailwind CSS.

So, throughout this post, we’re going to explore this pairing, how to use them together to build grid layouts, as well as how you can use them in some real-world examples.

Prerequisites

Before we get into the bulk of the article and start looking at Tailwind CSS and Grid, let’s talk about some prerequisites.

It should be noted that none of these are mandatory, but they will be helpful in allowing you to get the most out of this post.

1. Ideally, have some experience using Tailwind CSS and are comfortable using its syntax.
2. If you want to follow along, have an example Tailwind CSS project running. Alternatively, use a tool like CodePen to test the code examples we provide and experiment with them.

Defining a grid container

The first step when working with Grid is to define the overall grid container that will house our child items.

To do this, we can use either the grid or inline-grid classes to create a grid that is either a block-level element (grid) or an inline-level element (inline-grid).

Managing grid columns

Once we have our base grid container, we can begin populating it with child items. However, we encounter an issue: we need to lay out those child items. This is because by default, all your items are in a one-column layout stacked on top of each other, taking up the entire width of the container.

So, if you want something more than just a single column layout, you’ll need to use the grid-cols-x classes. These classes let you define the number of columns available for use in your grid. For example, in our code snippet below, we use grid-cols-4 to get four columns in our grid.

After you’ve defined the number of columns available in your grid, your items will automatically be placed inside them based on the order you’ve defined in the markup, and they’ll all take up exactly one column.

But, what if you want one item to take up two columns and to switch another two items around so one item comes before another (a bit contrived, I know, but let’s run with it).

In these situations, you can use the col-start-x, col-span-x, and col-end-x classes. These classes allow you to control, as the names suggest, the columns in which the item they’re applied to starts and ends, as well as how many columns it spans.

Managing grid rows

Similar to how we can control the number of columns available inside a grid container, we can also control the number of rows available via the grid-rows-x classes. For example, if you used the class grid-rows-3, the grid container would then have three rows inside it.

It’s worth mentioning as well that by default, if you have a single column grid, each new item you add will implicitly be put into a new row without you needing to define the number of rows required. And, even if you define a number of rows less than the number of items inside the grid, the number of rows created will still be equal to the number of items.

If you want to change which items are in which rows, you have access to the row-start-x, row-span-x, and row-end-x classes like we did for managing columns. By using these classes, we can manipulate which items start in which rows and how many rows each spans or ends in.

Spacing

Now that we’re acquainted with controlling the rows and columns of a grid, let’s take a step back and look at something everyone will need to control in a grid: the spacing between items.

The spacing between items in our grid can be easily controlled using the gap class. We can control the gap on two axes x and y.

So, in total, there are three versions of this class. Use gap-<value> when you want to uniformly apply the same spacing to both axes. Use gap-x-<value> when you want to control the horizontal x axis, and use gap-y-<value> when you want to control the vertical y axis.

Alignment

When it comes to controlling the alignment of the grid and the items within it, there are a few classes you need to be aware of. These are justy-items/justify-self, items/self, content, and justify. Let’s take a look at each of these, but if you'd like to see them in action, check out the CodePen below.

justify-items/justify-self

justify-items (docs) controls how grid items are positioned horizontally along the grid slot they occupy. justify-items is applied to the top level of the element, where grid is defined, and the value specified for justify-items applies to all items with the grid.

However, you can override individual items within the grid by specifying justify-self (docs) on them. This allows you to control how that individual item positions itself horizontally along the grid slot it occupies.

items/self

items (docs) performs a similar function to justify-items, but instead of controlling how grid items align along the horizontal inline-axis, it controls how they align on the vertical cross-axis.

And, similar to justify-self, self (docs) allows you to override the value items specified for all items in the grid on a per-grid-item basis.

content

Where items focuses on the positioning on the cross axis for each item inside its own grid slot, content (docs) focuses on the positioning of the grid rows overall. Allowing you to move all the rows in the grid to the center of the container, for example, using content-center.

justify

justify (docs) is similar in function to content, but instead of focusing on the rows, it focuses on the columns. For example, it allows us to evenly space all the columns across the width of the grid container by using the justify-between class.

Example Grid Scenarios

It’s all well and good talking about the theory and knowing how to use the individual parts of CSS Grid, but let’s solidify that knowledge by taking a look at some of the things we’ve mentioned in practice.

Below are two CodePen examples that showcase two common implementations of grid.

The first is a blog post grid layout showing how to lay out a list of blog posts in a two-column grid with even spacing. The second example illustrates a typical website layout using a grid with multiple rows and columns, where child items span various combinations of them.

Blog Post Grid

Website layout

Cheatsheet

When it comes to using grid, there are a lot of properties you need to remember and be comfortable with. So, to help, here is a cheatsheet that contains the standard CSS properties you’ll need when working with grid, along with some common Tailwind CSS classes used to control that property and its purpose.

Recap

In this post, we’ve taken a dive into CSS Grid in Tailwind CSS and how we can use it to build different grid layouts in our projects. We’ve also looked at how we can manage and manipulate the content inside the grid containers we create before taking a look at some example grid scenarios to see where it could be helpful.

If you’re interested in learning more about CSS Grid in Tailwind CSS, I highly recommend checking out their documentation, which is packed with various possibilities and options, along with examples.

Finally, if you’re interested in learning more about CSS Grid overall and how it compares to its layout relative Flexbox, then check out our comparison post here.