Tailwind CSS Grid Template Columns

The grid-template-columns property in Tailwind CSS allows you to define the size of columns in a grid layout. It is used in combination with the grid and gap utilities to create perfectly aligned and spaced grids.

Syntax

The basic syntax for using the grid-template-columns property is as follows:

<div class="grid grid-cols-{number of columns} gap-{spacing}">
  <!-- grid items -->
</div>

Example

Let's take a simple example to understand the concept better. In this example, we will create a 3-column grid with a gap of 4:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-500">Column 1</div>
  <div class="bg-green-500">Column 2</div>
  <div class="bg-blue-500">Column 3</div>
</div>

Output

The above example will create a 3-column grid with a 4-pixel gap between each column. Each column will have an equal width.

Explanation

In the above example, we have used the grid-cols-3 utility to define the number of columns in the grid. We have also used the gap-4 utility to specify the gap between each column.

Use

The grid-template-columns property can be used to create any number of columns with different sizes. You can use any length unit or relative value, such as px, em, rem, %, fr.

Here's an example of creating a 4-column grid with different column widths:

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-red-500">Column 1</div>
  <div class="col-span-1 bg-green-500">Column 2</div>
  <div class="col-span-1 bg-blue-500">Column 3</div>
  <div class="col-span-1 bg-yellow-500">Column 4</div>
</div>

This will create a grid with two columns of width 2 and two columns of width 1:

Important Points

• The grid-template-columns property is used in combination with the grid and gap utilities.
• You can define any number of columns with different widths using this property.
• You can use any length unit or relative value to define column widths.

Summary

The grid-template-columns property in Tailwind CSS is used to define the size of columns in a grid layout. It is a powerful utility that can be used to create perfectly aligned and spaced grids with any number of columns and different column widths.