Tailwind CSS Grid Auto Columns

23 Mar, 2022
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/tailwindcss@^1.0/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/tailwindcss@^1.0/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/tailwindcss@^1.0/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/tailwindcss@^1.0/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
Tailwind CSS
Tailwind-Grid
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?