How To Make Grid Items Auto Height Using Tailwind CSS ?

Forums CSSHow To Make Grid Items Auto Height Using Tailwind CSS ?
Staff asked 6 months ago

How to make grid items auto height using Tailwind CSS?

Answers (2)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 4 months ago

You can easily make CSS grid items to auto height using grid-template-columns property in Tailwind CSS.

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.
<element class="grid grid-cols-number"> Contents... </element>
<!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>

 

Staff answered 6 months ago
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css" rel="stylesheet"/>
<div class="inline-grid grid-cols-2">
  <div class="px-1">Full name:</div>
  <div class="px-1">Favoutite fruits:</div>
  <div class="px-1">John Doe</div>
  <div class="px-1">
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
      <li>Bananas</li>
    </ul>
  </div>
</div>

 

Subscribe

Select Categories