Tailwind CSS Grid Auto Columns
Last Updated :
23 Jul, 2025
This class accepts more than one value in tailwind CSS in which all the properties are covered in class form. It is the alternative to CSS grid-auto-columns property. This class is used to specify the size for the columns of implicitly generated grid containers. This class is used for utilities to control the size of implicitly-created grid columns.
Grid Auto columns classes:
- auto-cols-auto
- auto-cols-min
- auto-cols-max
- auto-cols-fr
auto-cols-auto: It is the default value. The size is determined implicitly according to the size of the container.
Syntax:
<element class="auto-cols-auto">..</element>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Grid Auto Columns Class</b>
<div class ="m-8 p-8 grid bg-green-600 grid-rows-2
grid-flow-col gap-4 auto-cols-auto">
<div class = "p-4 bg-green-200">
HyperText Markup language
</div>
<div class = "p-4 bg-green-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-green-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-green-200">
Bootstrap become replacement of CSS
</div>
</div>
</body>
</html>
Output:
Auto column class
auto-cols-min: It specifies the size depending on the smallest item in the container.
Syntax:
<element class="auto-cols-min">..</element>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Grid Auto Columns Class</b>
<div class ="m-8 p-8 grid bg-green-600 grid-rows-2
grid-flow-col gap-4 auto-cols-min">
<div class = "p-4 bg-green-200">
HyperText Markup language
</div>
<div class = "p-4 bg-green-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-green-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-green-200">
Bootstrap become replacement of CSS
</div>
</div>
</body>
</html>
Output:
auto-cols-max: It specifies the size depending on the largest item in the container.
Syntax:
<element class="auto-cols-max">..</element>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Grid Auto Columns Class</b>
<div class ="m-8 p-8 grid bg-green-600 grid-rows-2
grid-flow-col gap-4 auto-cols-max">
<div class = "p-4 bg-green-200">
HyperText Markup language
</div>
<div class = "p-4 bg-green-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-green-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-green-200">
Bootstrap become replacement of CSS
</div>
</div>
</body>
</html>
Output:
auto-cols-fr: It specifies the size in the range of [min, max] greater than or equal to min and less than or equal to max.
Syntax:
<element class="auto-cols-fr">..</element>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Grid Auto Columns Class</b>
<div class ="m-8 p-8 grid bg-green-600 grid-rows-2
grid-flow-col gap-4 auto-cols-fr">
<div class = "p-4 bg-green-200">
HyperText Markup language
</div>
<div class = "p-4 bg-green-200">
Cascading Style Sheet
</div>
<div class = "p-4 bg-green-200">
LiveScript Become JavaScript
</div>
<div class = "p-4 bg-green-200">
Bootstrap become replacement of CSS
</div>
</div>
</body>
</html>
Output:
auto column class