What are Auto Columns & Rows?
When you use grid-flow-col or grid-flow-row, the grid creates implicit tracks
(columns or rows you didn't explicitly define). Auto sizing controls how big these implicit tracks should be.
This is incredibly useful for dynamic content where you don't know how many items you'll have, or when you want the grid to adapt intelligently to content size.
Auto Columns Classes
Control the width of implicitly-created columns:
auto-cols-auto- Size based on content (default)auto-cols-min- As small as possible (min-content)auto-cols-max- As large as content needs (max-content)auto-cols-fr- Fill available space (1fr)
💡 When Do You Need This?
Auto columns are used when you have grid-flow-col and items overflow into new columns.
This controls how wide those new columns should be.
auto-cols-max Example
Create columns that are as wide as their content needs:
<div class="grid grid-flow-col auto-cols-max gap-4">
<div class="bg-blue-500 text-white p-4">Short</div>
<div class="bg-blue-500 text-white p-4">Medium Length</div>
<div class="bg-blue-500 text-white p-4">This is a very long item</div>
</div>Each column will be exactly as wide as its content, no wider. Perfect for tag lists or navigation where items have different widths!
auto-cols-fr Example
Create equal-width columns that share available space:
<div class="grid grid-flow-col auto-cols-fr gap-4">
<div class="bg-green-500 text-white p-4">Item 1</div>
<div class="bg-green-500 text-white p-4">Item 2</div>
<div class="bg-green-500 text-white p-4">Item 3</div>
</div>All columns will be equal width, splitting the available space evenly. Great for equal-width card layouts!
Auto Rows Classes
Control the height of implicitly-created rows:
auto-rows-auto- Size based on content (default)auto-rows-min- As short as possible (min-content)auto-rows-max- As tall as content needs (max-content)auto-rows-fr- Fill available height (1fr)
auto-rows-fr Example
Create equal-height rows:
<div class="grid grid-rows-2 auto-rows-fr gap-4 h-96">
<div class="bg-purple-500 text-white p-4">Row 1</div>
<div class="bg-purple-500 text-white p-4">Row 2</div>
<div class="bg-purple-500 text-white p-4">Row 3 (auto)</div>
<div class="bg-purple-500 text-white p-4">Row 4 (auto)</div>
</div>
The first 2 rows are explicit. Rows 3 and 4 are auto-created and will be equal height thanks to
auto-rows-fr.
Real-World Example: Dynamic Tag List
Perfect for tags, badges, or pills where content varies:
<div class="grid grid-flow-col auto-cols-max gap-2">
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
React
</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
Tailwind CSS
</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
JavaScript
</span>
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
Node.js
</span>
</div>Each tag takes only the width it needs. No wasted space!
Real-World Example: Equal-Width Cards
Create a flexible card layout that adapts to any number of items:
<div class="grid grid-flow-col auto-cols-fr gap-6">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-bold text-lg mb-2">Card 1</h3>
<p class="text-gray-600">Content here</p>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-bold text-lg mb-2">Card 2</h3>
<p class="text-gray-600">Content here</p>
</div>
<div class="bg-white rounded-lg shadow p-6">
<h3 class="font-bold text-lg mb-2">Card 3</h3>
<p class="text-gray-600">Content here</p>
</div>
</div>Add or remove cards dynamically, and they'll always be equal width!
⚠️ Common Mistake:
auto-cols only affects implicit columns created by overflow.
If you define grid-cols-3, those 3 columns are explicit and won't be affected by
auto-cols settings.
Combining with Grid Flow
Auto sizing works hand-in-hand with grid flow:
<!-- Vertical timeline with equal-width entries -->
<div class="grid grid-flow-col grid-rows-5 auto-cols-max gap-4">
<div class="bg-blue-500 text-white p-4 rounded">2024-01-01: Project started</div>
<div class="bg-blue-500 text-white p-4 rounded">2024-02-15: First milestone</div>
<div class="bg-blue-500 text-white p-4 rounded">2024-03-10: Beta release</div>
<div class="bg-blue-500 text-white p-4 rounded">2024-04-01: Launch!</div>
<div class="bg-blue-500 text-white p-4 rounded">2024-05-15: Version 2.0</div>
<!-- More items flow into new columns -->
<div class="bg-blue-600 text-white p-4 rounded">2024-06-01: Expansion</div>
</div>
grid-rows-5 creates 5 rows. With grid-flow-col, items fill vertically.
When more than 5 items exist, new columns are created. auto-cols-max makes those new columns
as wide as their content.
Responsive Auto Sizing
Change auto sizing at different breakpoints:
<div class="grid grid-flow-col auto-cols-max md:auto-cols-fr gap-4">
<!-- Mobile: columns sized by content
Desktop: equal-width columns -->
</div>✅ Pro Tip:
Use auto-cols-max for tag clouds and navigation where items should be compact.
Use auto-cols-fr for equal-width cards and dashboard widgets!
When to Use Each
auto-cols-max / auto-rows-max
Use for: Tags, badges, navigation items, compact layouts
auto-cols-fr / auto-rows-fr
Use for: Equal-size cards, dashboard widgets, uniform grids
auto-cols-min / auto-rows-min
Use for: Ultra-compact layouts, minimizing space usage
auto-cols-auto / auto-rows-auto
Use for: Content-adaptive layouts (default behavior)