Tailwind CSS - Grid Template Columns

Previous
Quiz
Next

Tailwind CSS Grid Template Columns is a utility class that specifies the number and size of columns in a grid layout.

Tailwind CSS Grid Template Columns Classes

The following is the list of Tailwind CSS Grid Template Columns classes that define the columns in grid layout.

Class CSS Properties
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5 grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6 grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7 grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8 grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9 grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10 grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11 grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none grid-template-columns: none;
grid-cols-subgrid grid-template-columns: subgrid;

Functionality of Tailwind CSS Grid Template Columns

  • grid-cols-*: This class is used to create a grid layout with n numbers of equally sized columns. {*} representing here the count of columns ranges from 1 to 12.
  • grid-cols-none: This class replaces CSS grid-template-columns: none; property. This class is used to disable the columns utility for grid layout.
  • grid-cols-subgrid: This class replaces CSS grid-template-columns: subgrid; property. This class allows a grid item to inherit the grid column tracks from its parent grid.

Tailwind CSS Grid Template Columns Class Examples

The following examples will illustrate the Tailwind CSS Grid Template Columns class utility.

Specifying Columns in Grid

The below example illustrates the use of grid-cols-*, here you can define a valid number from the above table to specify the number of columns you want to put. Here in this example, we will create 4 columns.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

Disable Columns Utility

The below example illustrates the use of the grid-cols-none class, which will disable.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col None
    </h2>
    <div class="grid grid-cols-none gap-4">
        <div class="bg-lime-500 p-4">1</div>
        <div class="bg-violet-500 p-4">2</div>
        <div class="bg-green-500 p-4">3</div>
        <div class="bg-pink-500 p-4">4</div>
        <div class="bg-lime-300 p-4">5</div>
        <div class="bg-violet-300 p-4">6</div>
        <div class="bg-green-300 p-4">7</div>
        <div class="bg-pink-300 p-4">8</div>
    </div>
</body>

</html>

Adopting Columns Track

To adopt columns tracks, you can use the grid-cols-subgrid class. In this below example, we have used the grid-cols-subgrid class to do so.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Col Subgrid
    </h2>
    <div class="grid grid-cols-4 gap-4">
        <div class="bg-green-500 p-4">01</div>
        <div class="bg-green-500 p-4">02</div>
        <div class="bg-green-500 p-4">03</div>
        <div class="bg-green-500 p-4">04</div>
        <div class="bg-green-500 p-4">05</div>
        <div class="grid grid-cols-subgrid gap-4 col-span-3">
            <div class="col-start-2 bg-green-300 p-4">06</div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next