Building Layouts with Grid Utilities

Another way of organizing website content is through grids. Tailwind CSS offers powerful utilities for creating grid layouts. This chapter will explain how to use Tailwind CSS grid utilities to establish grid containers and items.

Grid Container

To define a grid container, use the grid class. You can control the number of columns, the gaps between rows and columns, and more.

Explanation

1. grid : Sets the display of the element to grid;

2. grid-cols-3 : Defines a grid with three columns;

3. gap-4 : Adds a gap of 1rem (16px) between grid items.

Grid with Rows

grid-rows-2: Defines a grid with two rows.

Controlling Column and Row Sizes

You can control the sizes of columns and rows using grid-cols-{n} and grid-rows-{n} classes, where {n} represents the number of columns or rows. You can also use fractional units (fr), percentages, and other sizing units.

Explanation

1. col-span-2 : Spans the element across two columns;

2. col-span-3 : Spans the element across all three columns.

Fixed and Flexible Sizes

Explanation

1. w-1/2 : Sets the width of the element to 50% of its container;

2. w-full : Sets the width of the element to 100% of its container;

3. w-1/3 : Sets the width of the element to 33.33% of its container.

Grid Template Columns and Rows

You can use specific utility classes to define the number and width of columns and rows in your grid layout.

Custom Grid Columns

Explanation

1. grid-cols-4 : Defines a grid with four columns;

2. col-span-1 : Spans the element across one column;

3. col-span-2 : Spans the element across two columns.

Custom Grid Rows

Explanation

1. grid-rows-3 : Defines a grid with three rows;

2. row-span-2 : Spans the element across two rows;

3. row-span-1 : Spans the element across one row.

Note

Please refer to the official documentation for more information about the Tailwind CSS Grid.