Tailwind CSS - Grid Auto Columns

Previous
Quiz
Next

Tailwind CSS Grid Auto Columns is a utility class specifying the size of grid columns that are created implicitly.

Tailwind CSS Grid Auto Columns Classes

The following is the list of Tailwind CSS Grid Auto Columns classes used to set the size of implicitly created grid columns.

Class CSS Properties
auto-cols-auto grid-auto-columns: auto;
auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-auto-columns: minmax(0, 1fr);

Functionality of Tailwind CSS Grid Auto Columns Classes

  • auto-cols-auto: Set the width of grid columns to the width of their content.
  • auto-cols-min: Set the width of the grid column to the minimum width needed to fit its content.
  • auto-cols-max: Set the width of grid columns to the maximum width needed to fit its content.
  • auto-cols-fr Set the column width based on the equal fraction of the space available.

Tailwind CSS Grid Auto Columns Classes Examples

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

Resizing auto-created Grid Columns

The auto-cols-auto utility is used to automatically resize the explicitly created grid columns, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Auto Class
    </h2>
    <div class="grid grid-flow-col auto-cols-auto gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

Minimizing auto-created Grid Columns

The auto-cols-min utility is used to automatically resize the explicitly created grid columns, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols min Class
    </h2>
    
    <!--The auto-cols-min class minimizes the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-min gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

Maximizing auto-created Grid Columns

The auto-cols-max utility is used to automatically resize the explicitly created grid columns, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols max Class
    </h2>
    
    <!--The auto-cols-max class maximize the width of 
           automatically created grid columns to fit their content.-->
    
    <div class="grid grid-flow-col auto-cols-max gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>

Fractionating auto-created Grid Columns

The auto-cols-fr utility is used to automatically resize the explicitly created grid columns, as demonstrated in the example below.

Example

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

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Grid Auto Cols Fr Class
    </h2>
    
    <!--The auto-cols-fr class equally fraction the
           available space between grid columns-->
    
    <div class="grid grid-flow-col auto-cols-fr gap-4 p-4">
        <div class="bg-green-300 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2 with more content</div>
        <div class="bg-green-300 p-4">Item 3</div>
    </div>
</body>

</html>
Print Page
Previous
Next