Tailwind Grid Template Column

In a CSS grid layout, a grid column is a vertical track in the grid container. Grid columns are used alongside grid rows to layout items in a 2-dimensional grid system. The Tailwind grid-template-columns property is used to define the number and size of these columns.

Applying Grid Columns in Tailwind CSS

In Tailwind CSS, you can define the number of grid columns in your grid container using the grid-cols-{n} utility, where {n} is the number of columns.

For example, to create a grid container with three columns, you would use the grid-cols-3 class:

<div class="grid grid-cols-3">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

Preview

In this example, the grid container has three grid items, each occupying one grid column.

Spanning Across Multiple Grid Columns

You can also span an item across multiple grid columns using the col-span-{n} utility, where {n} is the number of columns to span across.

Let's modify the previous example and make the first item span across two columns:

<div class="grid grid-cols-3">
  <div class="col-span-2">A</div>
  <div>B</div>
  <div>C</div>
    <div>D</div>
</div>

Preview

Now, the first item will take up two columns, spanning from the first column to the second.

Customizing Grid Columns

If the default grid column classes do not meet your needs, Tailwind allows you to extend the default configuration via the tailwind.config.js file. You can add custom grid column configuration like so:

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        custom: 'repeat(4, minmax(0, 1fr))',
      },
    },
  },
};

In this example, a custom grid column configuration named 'custom' was added, which creates a grid with four columns of equal size. You can use it just like the default classes:

<div class="grid grid-cols-custom">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Tailwind CSS Grid Column Class Table