Tailwind CSS Grid Template Columns

This class is used to control the columns of a grid in Tailwind CSS. It is the alternative to the CSS grid-template-columns property. The grid-cols-<number> utilities are used to set the number of equally sized columns in a grid.

Grid Template Columns

grid-cols-1: Creates one column.
grid-cols-2: Creates two equal-width columns.
grid-cols-3: Creates three equal-width columns.
grid-cols-4: Creates four equal-width columns.
grid-cols-5: Creates five equal-width columns.
grid-cols-6: Creates six equal-width columns.
grid-cols-7: Creates seven equal-width columns.
grid-cols-8: Creates eight equal-width columns.
grid-cols-9: Creates nine equal-width columns.
grid-cols-10: Creates ten equal-width columns.
grid-cols-11: Creates eleven equal-width columns.
grid-cols-12: Creates twelve equal-width columns.
grid-cols-none: Sets grid-template-columns to none.
grid-cols-subgrid: Uses the column tracks defined by the parent grid.
grid-cols-[<value>]: Sets a custom value for grid-template-columns.
grid-cols-(<custom-property>): Uses a CSS custom property for grid-template-columns.

Syntax:

<element class="grid grid-cols-number"> Contents... </element>

Example:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Tailwind CSS Grid Template Columns</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<!--Driver Code Ends-->

<body class="text-center">

    <h1 class="text-green-600 text-4xl font-bold mt-5">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS Grid Template Columns</b>

    <div class="grid grid-cols-3 gap-4 p-5">

        <div class="bg-green-700 text-white p-6">1</div>
        <div class="bg-green-500 text-white p-6">2</div>
        <div class="bg-green-300 p-6">3</div>
        <div class="bg-green-700 text-white p-6">4</div>
        <div class="bg-green-500 text-white p-6">5</div>
        <div class="bg-green-300 p-6">6</div>

    </div>

</body>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

Tailwind CSS Grid Template Columns

Grid Template Columns

Explore