Auto-Flow & Placement Direction

How Grid Decides What Goes Where

When you don’t explicitly place items, Grid makes choices.

Those choices are governed by auto-placement — specifically grid-auto-flow.

This is the rulebook Grid uses to fill the grid.

---

The Default: Row Flow

grid-auto-flow: row;

This is the default behavior:

• Fill rows left to right
• Then create new rows as needed

It feels familiar — but it’s still Grid, not Flexbox.

---

Column Flow Changes Everything

grid-auto-flow: column;

Now Grid:

• Fills top to bottom
• Then creates new columns

Same items.
Same grid.
Very different outcome.

---

Dense Packing (Use Carefully)

grid-auto-flow: row dense;

dense tells Grid to backfill gaps when possible.

This can:

• Reduce empty space
• Reorder items visually

Powerful — but potentially confusing if overused.

---

🧪 MiniMo — Auto-Flow Control Room

Change the flow direction.
Add gaps.
Watch Grid rethink placement.

---

The Takeaway

Auto-placement is predictable — once you know the rules.

Control the flow,
or Grid will happily choose for you.

---

Extra Bits & Bytes

📘 Grid Auto Flow Study Guide (PDF)

📘 Grid Auto Flow Infographic (PNG)

---

⏭ Next Column: Grid Lines & Spans

Counting lines, forwards and backwards, and spanning them too.