How to make grid items auto height using tailwind CSS ? - GeeksforGeeks

14 Jun, 2021
You can easily make CSS grid items to auto height using grid-template-columns property in Tailwind CSS. 
Tailwind uses grid-col and grid-row property which is an alternative to the grid-template-columns property in CSS. The grid-template-columns property in CSS is used to set the number of columns and size of the columns of the grid.
This class accepts more than one value in tailwind CSS all the properties are covered as in class form. The number of columns is set by the number of values given to this class. 
Grid Template Columns:
grid-cols-1: Each row concedes only one column.
grid-cols-6:  Each row concedes six columns.
grid-cols-12: Each row concedes twelve columns.
 
Syntax:
<element class="grid grid-cols-number"> Contents... </element>
Example 1:
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>          <div class="grid grid-cols-2">        <div class="bg-pink-500 m-3">GEEKSFORGEEKs</div>        <div class="bg-green-500 m-3">Courses</div>        <div class="px-1 bg-green-500 m-3">            <ol>                <li>Data Structure</li>                <li>Competitive Programming</li>            </ol>        </div>        <div class="px-1 bg-pink-500 m-3">            Web Development        </div>        <div class="px-1 bg-pink-500 m-3">            Machine Learning        </div>          <div class="px-1 bg-green-500 m-3">            <ul>                <li>ReactJs</li>                <li>Angular</li>                <li>Vue</li>            </ul>        </div>    </div></body>  </html>
Output:
Note: From the above output, you can observe that each row has a different height depending on max-height required by a grid of a particular row.
Example 2:
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>          <div class="grid grid-cols-3">        <div class="h-40 w-40 bg-green-400 m-3">1) ROW-1</div>        <div class="h-50 w-40 bg-green-400 m-3">2) ROW-1</div>        <div class="h-60 w-40 bg-green-400 m-3">3) ROW-1</div>        <div class="h-80 w-40 bg-blue-400 m-3">1) ROW-2</div>        <div class="h-40 w-40 bg-blue-400 m-3">1) ROW-2</div>        <div class="h-20 w-40 bg-blue-400 m-3">1) ROW-2</div>        <div class="h-40 w-40 bg-red-400 m-3">1) ROW-3</div>        <div class="h-40 w-40 bg-pink-500 m-3">2) ROW-3</div>        <div class="h-40 w-40 bg-pink-500 m-3">3) ROW-3</div>    </div></body>  </html>
Output:
Tailwind CSS
Tailwind CSS-Questions
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript