A Complete Guide to Grid with TailwindCSS

Trần Trung Tín — Wed, 05 Oct 2022 13:56:12 +0000

Check out the interactive demo version of this blog post at https://www.telior.xyz/blog/a-complete-guide-to-grid-with-tailwindcss

Introduction

Grid is a layout tool that allows you to create flexible, consistent layouts. In this guide, we'll take a look at how grid layout works and how it can be used in your projects. We'll also explore some of the most common scenarios for using grids in development and design.

Grid Introduction

A grid system is a way of laying out content on the screen. It's often used to create consistent layouts, but it can also be a great tool for creating flexible and responsive design options.

The idea behind a grid is that you have multiple columns or rows that divide your page up into rectangular blocks; these blocks are then filled with content (or floated). Each block can have its own width and height in the boundary of the grid cell, so you can easily change its dimensions without affecting other blocks' dimensions or breaking any rules of alignment or hierarchy in your design.

Grid Layout Basics

In its most basic form, Grid Layout is made up of columns and rows, which can be used to place content on your web pages.

Grid breaks down the page into boxes that go from left to right, top to bottom. The columns and rows are separated by vertical lines, called gutters. The space between the boxes is called gutter space. Grid takes advantage of this structure to create a page that looks organized and balanced, even if you don’t have any design skills or experience.

The TailwindCSS grid system

The TailwindCSS grid system is a collection of classes, which you can use to create responsive layouts. You can also use the grid system to create fixed-width layouts or fluid grids, depending on your needs.

The basic design of the grid system is based on Flexbox, so if you're not familiar with it (or haven't used it for a while), check out our guide to learning TailwindCSS Flexbox here

Rows and Columns

If you need to specify how many rows or columns your grid should have, you can use the grid-template-rows and grid-template-columns classes. These classes have the format of grid-rows-{n} and grid-cols-{n}, where n is the number of rows or columns you want to create.

If an item spans multiple rows or columns, you can use col-span-{n} or row-span-{n} to specify how many rows or columns it should span. Similar to the way colspan HTML attribute of td tag works.

There are also col-start-{n}/row-start-{n} and col-end-{n}/row-end-{n} classes, which allow you to specify the starting and ending columns/rows for an item.

<div class="text-center">
  <h3>3x2 grid:</h3>
  <div class="grid grid-cols-2 grid-rows-3 text-white">
    <div class="bg-slate-800">1</div>
    <div class="bg-teal-800">2</div>
    <div class="bg-orange-600">3</div>
    <div class="bg-slate-800">4</div>
    <div class="bg-teal-600">5</div>
  </div>
</div>
<br>
<div class="text-center">
  <h3>2 columns grid:</h3>
  <div class="grid grid-cols-2 text-white">
    <div class="bg-purple-800">1</div>
    <div class="bg-pink-800">2</div>
    <div class="bg-pink-800">3</div>
    <div class="bg-purple-800">4</div>
  </div>
</div>

Gutters

By default, there is no gutter between grid cells. If you need to add spacing between cells, you can use the gap-{n} classes, where n is the number of spacing units (0.25rem per unit by default) you want to use as the gutter. You can also use the gap-x-{n} and gap-y-{n} classes to specify the horizontal and vertical gutters separately.

<div class="text-center">
  <h3>3x2 grid:</h3>
  <div class="grid grid-cols-2 grid-rows-3 text-white gap-2">
    <div class="bg-slate-800">1</div>
    <div class="bg-teal-800">2</div>
    <div class="bg-orange-600">3</div>
    <div class="bg-slate-800">4</div>
    <div class="bg-teal-600">5</div>
  </div>
</div>
<br>
<div class="text-center">
  <h3>2 columns grid:</h3>
  <div class="grid grid-cols-2 text-white gap-x-2 gap-y-4">
    <div class="bg-purple-800">1</div>
    <div class="bg-pink-800">2</div>
    <div class="bg-pink-800">3</div>
    <div class="bg-purple-800">4</div>
  </div>
</div>

Auto-placement

TailwindCSS Grid has two classes that help you control the placing of your content: grid-flow-row and grid-flow-col. These classes control how the grid items are placed in the grid container. The default value is grid-flow-row, which means that the grid items are placed in the grid container from left to right, top to bottom.

If you want to change the direction of the placement, you can use grid-flow-col to place the grid items from top to bottom, left to right (commonly used when there are a specified number of rows with grid-rows-{n} in the grid container).

<div class="text-center">
  <h3>3x2 grid, flow by column:</h3>
  <div class="grid grid-flow-col grid-cols-2 grid-rows-3 gap-2 text-white">
    <div class="bg-slate-800">1</div>
    <div class="bg-teal-800">2</div>
    <div class="bg-orange-600">3</div>
    <div class="bg-slate-800">4</div>
    <div class="bg-teal-600">5</div>
  </div>
</div>

The grid-flow-dense, grid-flow-row-dense, grid-flow-col-dense classes can be used to make the grid items fill the gaps in the grid container. These classes are useful when you have a grid container with a fixed number of rows and columns, and you want to make sure that the grid items are placed in the grid container in the most efficient way possible.

<div class="text-center">
  <h3>3x2 grid, flow densely by row:</h3>
  <div class="grid grid-flow-dense grid-cols-3 grid-rows-3 gap-2 text-white">
    <div class="col-span-2 bg-slate-800">1</div>
    <div class="col-span-2 bg-teal-800">2</div>
    <div class="bg-orange-600">3</div>
    <div class="bg-slate-800">4</div>
    <div class="bg-teal-600">5</div>
  </div>
</div>

Justified and Aligned Content

You can justify and align content to an individual element, or across the whole page.

To align all the content in a grid container, you can use the justify-items-{start|end|center|stretch} (along the inline axis) and items-{start|end|center|baseline|stretch} (along the cross axis) classes. These classes control how the grid items are aligned in the grid container. The default value is justify-items-stretch and align-items-stretch, which means that the grid items are stretched to fill the grid container.

<div class="text-center">
  <h3>3x2 grid:</h3>
  <div class="grid h-32 grid-cols-2 grid-rows-3 items-end justify-items-center gap-2 bg-slate-200 text-white">
    <div class="w-full bg-slate-800">1</div>
    <div class="w-full bg-teal-800">2</div>
    <div class="w-16 bg-orange-600">3</div>
    <div class="w-12 bg-slate-800">4</div>
    <div class="w-16 bg-teal-600">5</div>
  </div>
</div>

On the other hand, if you want to align the content of a single grid item, you can use the justify-self-{auto|start|end|center|stretch} (along the inline axis) and self-{start|end|center|baseline} (along the cross axis) classes. These classes control how the grid item is aligned in the grid container. The default value is justify-self-auto and align-self-auto, which means that the grid item is aligned according to the value of the justify-items and align-items classes.

<div class="text-center">
  <h3>3x2 grid:</h3>
  <div class="grid h-32 grid-cols-2 grid-rows-3 items-end justify-items-center gap-2 bg-slate-200 text-white">
    <div class="w-full bg-slate-800">1</div>
    <div class="w-full bg-teal-800">2</div>
    <div class="w-16 bg-orange-600 justify-self-end">3</div>
    <div class="w-12 bg-slate-800">4</div>
    <div class="w-16 bg-teal-600">5</div>
  </div>
</div>

More Possibilities

The TailwindCSS Grid is predefined classes that make it easy to create your own grid systems. Combined with TailwindCSS Flex classes, the possibilities are endless, but here are a few examples:

You can use it as an alternative to a predefined grid system (Bootstraps's grid, ...).
You can use it to implement complex layouts like masonry grid without the need to use any javascript.

Responsive Behaviors

The TailwindCSS Grid is responsive by default. You can use the sm, md, lg, and xl prefixes to change the behavior of the grid at different screen sizes.

Conclusion

The TailwindCSS grid system is a great way to create a responsive design. It’s easy to use, flexible, and can be customized based on the needs of your project. If you’re looking for a way to create a responsive design without having to write a lot of CSS, the TailwindCSS grid system is a great option. It’s also a great way to learn more about CSS Grid and Flexbox, which are two of the most popular layout tools in web development.

DEV Community: Trần Trung Tín