Part 23: Grid Auto Flow, Auto Rows & Auto Columns

The grid-auto-flow property controls how auto-placement algorithms place items that aren't explicitly positioned.

1. Grid Auto Flow Utilities

• grid-flow-row (default): Fills each row in turn.
• grid-flow-col: Fills columns first, adding new columns as needed.
• grid-flow-dense: Packs items tightly, filling in holes created by items that span multiple tracks!

<!-- Dense Packing avoids empty gaps -->
<div class="grid grid-cols-3 grid-flow-dense gap-4">
  <div class="col-span-2 bg-purple-200 p-4">Wide 1</div>
  <div class="bg-purple-100 p-4">Small 2</div>
  <div class="col-span-2 bg-purple-200 p-4">Wide 3</div>
  <div class="bg-purple-100 p-4">Small 4 (Slots into empty space!)</div>
</div>

2. Auto Rows (auto-rows-*)

Control the height of implicitly created grid rows: - auto-rows-max: Sets row height to size of largest item. - auto-rows-fr: Each row takes up 1 fraction of available space.

Key Takeaways

• Use grid-flow-dense to prevent empty gaps in asymmetric dashboards.
• Use auto-rows-* to manage row heights for dynamically generated content.

In Part 24, we will cover Aligning Grid Tracks & Grid Template Areas!