How To Make Grid Items Auto Height Using Tailwind CSS ?
Jun 2, 2022
Answers (2)
Add Answer
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>
<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>
