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.
- Ideally, have some experience using Tailwind CSS and are comfortable using its syntax.
- 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).
grid
inline-grid
grid
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.
grid-cols-x
grid-cols-4
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.
col-start-x
col-span-x
col-end-x
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.
grid-rows-x
grid-rows-3
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.
row-start-x
row-span-x
row-end-x
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.
gap
x
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.
gap-<value>
gap-x-<value>
x
gap-y-<value>
y
First time here? Discover what Prismic can do!
👋 Meet Prismic, your solution for creating performant websites! Developers, build with your preferred tech stack and deliver a visual page builder to marketers so they can quickly create on-brand pages independently!
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.
justy-items
justify-self
items
self
content
justify
justify-items/justify-self
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.
justify-items
justify-items
grid
justify-items
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.
justify-self
items/self
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.
items
justify-items
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.
justify-self
self
content
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.
items
content
content-center
justify
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.
content
justify-between
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.
display (docs)
display
grid, inline-grid
grid
inline-grid
Define a grid container
grid-template-columns (docs)
grid-template-columns
grid-cols-<number>, grid-cols-none, grid-cols-subgrid
grid-cols-<number>
grid-cols-none
grid-cols-subgrid
Specify the number of columns in the grid
grid-column (docs)
grid-column
col-span-<number>, col-span-full, col-start-<number>, col-start-auto, col-end-<number>, col-end-auto, col-auto
col-span-<number>
col-span-full
col-start-<number>
col-start-auto
col-end-<number>
col-end-auto
col-auto
Control how elements in the grid are placed across the columns in the parent grid
grid-template-rows (docs)
grid-template-rows
grid-rows-<number>,grid-rows-none,grid-rows-subgrid
grid-rows-<number>
grid-rows-none
grid-rows-subgrid
Specify the number of rows in the grid
grid-row (docs)
grid-row
row-span-<number>,row-span-full,row-start-<number>,row-start-auto,row-end-<number>,row-end-auto,row-auto
row-span-<number>
row-span-full
row-start-<number>
row-start-auto
row-end-<number>
row-end-auto
row-auto
Control how elements in the grid are placed across the rows in the parent grid
gap (docs)
gap
gap-<number>,gap-x-<number>,gap-y-<number>
gap-<number>
gap-x-<number>
gap-y-<number>
Controlling the gutters between items inside the grid
justify-items (docs)
justify-items
justify-items-start,justify-items-end,justify-items-center
justify-items-start
justify-items-end
justify-items-center
Control how grid items are aligned on their inline axis
justify-self (docs)
justify-self
justify-self-auto,justify-self-start,justify-self-end,justify-self-center
justify-self-auto
justify-self-start
justify-self-end
justify-self-center
Control how the target item is aligned along the grid’s inline axis
align-items (docs)
align-items
items-start,items-end,items-center
items-start
items-end
items-center
Control how grid items are aligned on the container’s cross axis
align-self (docs)
align-self
self-auto,self-start,self-end,self-center
self-auto
self-start
self-end
self-center
Control how the target item is aligned along the container’s cross axis
align-content (docs)
align-content
content-start,content-end,content-center,content-between,content-around,content-evenly,
content-start
content-end
content-center
content-between
content-around
content-evenly
Control how rows are positioned inside a grid container
justify-content (docs)
justify-content
justify-start,justify-end,justify-center,justify-between,justify-around,justify-evenly,
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
Control how grid items are positioned along a container’s main axis
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.