Lesson 9: Auto-Placement

How Grid Places Items

When you do not explicitly place grid items, CSS Grid has an algorithm that automatically positions them. Understanding this algorithm helps you predict layouts and control item flow.

The Default Behavior

By default, Grid places items:

• One per cell
• Left to right (in rows)
• Top to bottom
• In source order (HTML order)

/* Simple grid - items flow left to right, top to bottom */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Items 1, 2, 3 in first row */
/* Items 4, 5, 6 in second row */
/* And so on... */

grid-auto-flow: Changing Direction

Control whether Grid fills rows or columns first:

row (default)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;  /* Default */
}

/* Result: Fills rows left to right
   1  2  3
   4  5  6
   7  8  9  */

column

.grid {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;
}

/* Result: Fills columns top to bottom
   1  4  7
   2  5  8
   3  6  9  */

grid-auto-rows and grid-auto-columns

What happens when you have more items than defined rows or columns? Grid creates implicit tracks automatically.

Controlling Implicit Row Heights

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;  /* Only 2 explicit rows */
  grid-auto-rows: 150px;            /* Any extra rows are 150px */
}

/* Result:
   Row 1: 100px (explicit)
   Row 2: 100px (explicit)
   Row 3: 150px (implicit, auto-created)
   Row 4: 150px (implicit, auto-created)
   ... */

Flexible Implicit Rows

grid-auto-rows: minmax(100px, auto);

Creates rows that are at least 100px but grow to fit content.

Dense Packing

When some items span multiple cells, Grid can leave gaps. The dense keyword fills these holes by placing smaller items in them.

Without dense (default)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

.item-wide {
  grid-column: span 2;  /* Spans 2 columns */
}

/* Result (with gaps):
   1  1  2
   3  4  4
   _  5  6  <- Gap left by item 4 */

With dense

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

/* Result (no gaps):
   1  1  2
   3  4  4
   5  5  6  <- Item 5 moved up to fill gap */

Practical Examples

Pinterest-Style Masonry (Approximation)

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 20px;  /* Small incremental rows */
  gap: 16px;
}

.item-tall {
  grid-row: span 10;  /* Spans 200px (10 x 20px rows) */
}

.item-medium {
  grid-row: span 7;   /* Spans 140px */
}

.item-short {
  grid-row: span 5;   /* Spans 100px */
}

Dynamic Card Grid

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 24px;
}

/* Featured cards span 2 columns */
.card.featured {
  grid-column: span 2;
}

Vertical Timeline

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-rows: minmax(80px, auto);
  gap: 16px;
}

Combining Explicit and Implicit Grids

You can define some tracks explicitly and let Grid create the rest:

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 3 explicit columns */
  grid-auto-rows: 100px;                   /* Any rows auto-created at 100px */
  gap: 20px;
}

/* If you have 9 items:
   - All go in the 3 defined columns
   - Grid auto-creates 3 rows (each 100px tall) */

Real-World Use Case: Blog Archive

.blog-archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(250px, auto);
  grid-auto-flow: row dense;
  gap: 32px;
}

/* Featured posts span 2 columns */
.post.featured {
  grid-column: span 2;
}

/* Long posts take more vertical space */
.post.long {
  grid-row: span 2;
}

Understanding the Algorithm

Grid's auto-placement follows this logic:

1. Place explicitly positioned items first
2. Fill remaining cells with auto-placed items
3. Follow the grid-auto-flow direction (row or column)
4. Create implicit tracks as needed
5. If using dense, backfill gaps with smaller items

Common Patterns

Pattern 1: Infinite Scrolling Grid

/* Automatically adds rows as content loads */
.infinite-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}

Pattern 2: Newspaper Layout

/* Mix of different sized articles */
.newspaper {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
}

Pattern 3: Vertical Feed

/* Single column, variable height items */
.feed {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: row;
}

Debugging Auto-Placement

If items are not appearing where you expect:

• Check: did you explicitly place some items? They anchor the auto-placement.
• Check: is grid-auto-flow set to row or column?
• Check: are there enough explicit tracks, or is Grid creating implicit ones?
• Check: browser DevTools shows both explicit and implicit grid lines.

You Have Completed All 9 Lessons

Congratulations. You have gone from CSS Grid basics to advanced techniques and now know how to build almost any layout with Grid.

What you have learned:

• Grid fundamentals (Lessons 1-3)
• Real-world patterns (Lessons 4-6)
• Advanced techniques (Lessons 7-9)

Keep practicing, experiment with the generator, and remember: the best way to learn Grid is to use it in real projects.