0
0
Tailwindmarkup~5 mins

Implicit grid sizing in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Implicit grid sizing helps the grid automatically create rows or columns when you add more items than you planned. This keeps your layout neat without extra code.

When you have a list of items but don't know exactly how many will appear.
When you want the grid to grow automatically as you add more content.
When you want to avoid manually adding extra rows or columns in your grid.
When you want a flexible layout that adapts to different screen sizes.
When you want to keep your HTML simple and let CSS handle extra items.
Syntax
Tailwind
grid-auto-rows-[size]
grid-auto-cols-[size]

grid-auto-rows-[size] sets the height of rows created automatically.

grid-auto-cols-[size] sets the width of columns created automatically.

Examples
This creates a grid with 3 columns. Extra rows will be 5rem tall (20 means 5rem in Tailwind).
Tailwind
<div class="grid grid-cols-3 grid-auto-rows-20">...</div>
This creates a grid with 2 rows. Extra columns will be 6rem wide (24 means 6rem in Tailwind).
Tailwind
<div class="grid grid-rows-2 grid-auto-cols-24">...</div>
Extra rows will have minimum height needed by content.
Tailwind
<div class="grid grid-cols-2 grid-auto-rows-min">...</div>
Sample Program

This example creates a grid with 3 columns. When more than 3 items are added, new rows appear automatically. Each new row is 6rem tall because of grid-auto-rows-24. The gap between items is 1rem.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Implicit Grid Sizing Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Implicit Grid Sizing with Tailwind</h1>
  <div class="grid grid-cols-3 grid-auto-rows-24 gap-4 border p-4">
    <div class="bg-blue-300 p-2">Item 1</div>
    <div class="bg-blue-400 p-2">Item 2</div>
    <div class="bg-blue-500 p-2">Item 3</div>
    <div class="bg-blue-600 p-2">Item 4 (new row)</div>
    <div class="bg-blue-700 p-2">Item 5 (new row)</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Implicit grid sizing only applies when you add more items than the grid's defined rows or columns.

You can use Tailwind's spacing scale numbers for sizes, like 20 (5rem), 24 (6rem), or keywords like min and max.

Use browser DevTools to inspect the grid and see how rows or columns are added automatically.

Summary

Implicit grid sizing lets the grid add rows or columns automatically when needed.

Use grid-auto-rows-[size] or grid-auto-cols-[size] in Tailwind to control their size.

This helps keep layouts flexible and simple without extra HTML or CSS.