How to make grid items auto height using tailwind CSS ?

Last Updated : 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> 