0
0
Tailwindmarkup~5 mins

Grid auto-flow and placement in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Grid auto-flow helps place items automatically in a grid layout. It decides how new items fill rows or columns without you placing each one manually.

When you want items to fill rows first, then create new rows automatically.
When you want items to fill columns first, then create new columns automatically.
When you want to control the order items appear in a grid without specifying exact positions.
When you want to create a grid that adapts to different screen sizes easily.
When you want to place some items manually and let others flow automatically.
Syntax
Tailwind
grid-auto-flow: row | column | dense | row dense | column dense;

row means items fill rows first (default).

column means items fill columns first.

dense tries to fill gaps if possible.

Examples
Items fill each row left to right, then move to the next row.
Tailwind
grid-auto-flow: row;
Items fill each column top to bottom, then move to the next column.
Tailwind
grid-auto-flow: column;
Items fill rows but try to fill empty spaces left by bigger items.
Tailwind
grid-auto-flow: row dense;
Items fill columns and try to fill gaps for a tighter layout.
Tailwind
grid-auto-flow: column dense;
Sample Program

This example shows a grid with 4 columns. Item 2 spans 2 columns, creating a gap. Because of grid-flow-row-dense, later items fill gaps tightly.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Auto-flow Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Grid Auto-flow: row dense</h1>
  <div class="grid grid-cols-4 grid-flow-row-dense gap-4 border p-4">
    <div class="bg-blue-400 text-white p-4">1</div>
    <div class="bg-green-400 text-white p-4 col-span-2">2 (col-span-2)</div>
    <div class="bg-red-400 text-white p-4">3</div>
    <div class="bg-yellow-400 text-black p-4">4</div>
    <div class="bg-purple-400 text-white p-4">5</div>
    <div class="bg-pink-400 text-white p-4">6</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Tailwind uses classes like grid-flow-row, grid-flow-col, and grid-flow-row-dense to control flow.

Use col-span-* or row-span-* to make items bigger and see how auto-flow fills gaps.

Try resizing the browser to see how the grid adapts with auto-flow.

Summary

Grid auto-flow controls how items fill rows or columns automatically.

Use row or column to choose direction, and dense to fill gaps.

Tailwind classes make it easy to apply these rules without writing CSS.