CSS Grid's auto-placement algorithm automatically positions items that aren't explicitly placed, while implicit grids create new tracks as needed. Understanding these concepts lets you build dynamic layouts that handle variable content gracefully.

Explicit vs Implicit Grids

When you define grid-template-columns and grid-template-rows, you create an explicit grid. Items that overflow this explicit grid cause the browser to create implicit tracks.

CSS

.grid {
  display: grid;
  /* Explicit grid: 3 columns, 2 rows */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

If you have more than 6 items, additional rows are created implicitly. By default, implicit rows are auto-sized (fit their content).

Controlling Implicit Grid Size

Use grid-auto-rows and grid-auto-columns to control the size of implicitly created tracks.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px; /* Only 1 explicit row */

  /* All additional (implicit) rows will be 150px */
  grid-auto-rows: 150px;
}

/* Multiple implicit row sizes */
.grid-alternating {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px 200px; /* Alternates */
}

/* minmax for flexible implicit rows */
.grid-flexible {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

Implicit Columns

For horizontal-flow grids, control implicit column creation:

CSS

.horizontal-grid {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 200px; /* New columns are 200px */
}

Grid Auto-Flow

The grid-auto-flow property controls how auto-placed items flow into the grid.

CSS

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

  /* Default: items flow by row */
  grid-auto-flow: row;

  /* Items flow by column */
  grid-auto-flow: column;

  /* Dense packing: fills gaps */
  grid-auto-flow: row dense;

  /* Column direction with dense packing */
  grid-auto-flow: column dense;
}

Row vs Column Flow

CSS

/* Row flow (default) */
.row-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  /* Items: 1 2 3
            4 5 6
            7 8 9 */
}

/* Column flow */
.column-flow {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;
  /* Items: 1 4 7
            2 5 8
            3 6 9 */
}

Dense Packing

The dense keyword tells the grid to backfill empty cells with smaller items that fit, rather than maintaining source order.

CSS

.dense-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 10px;
}

/* Large item spans 2 columns */
.large {
  grid-column: span 2;
}

/* Without dense: gaps appear
   With dense: smaller items fill gaps */

Practical Auto-Placement Patterns

Dynamic Photo Gallery

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}

/* Featured images span more cells */
.gallery-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Masonry-Like Layout

CSS

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

/* Items span variable rows based on content */
.masonry-item.small {
  grid-row: span 8; /* 160px */
}

.masonry-item.medium {
  grid-row: span 12; /* 240px */
}

.masonry-item.large {
  grid-row: span 16; /* 320px */
}

Dashboard Widgets

CSS

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: 24px;
}

.widget {
  background: white;
  border-radius: 12px;
  padding: 20px;
}

.widget.small {
  /* Takes 1 cell (default) */
}

.widget.wide {
  grid-column: span 2;
}

.widget.tall {
  grid-row: span 2;
}

.widget.large {
  grid-column: span 2;
  grid-row: span 2;
}

.widget.full-width {
  grid-column: 1 / -1;
}

Auto-Placement with Explicit Positioning

You can mix explicit positioning with auto-placement. Explicitly placed items take their positions first, then remaining items fill in around them.

CSS

.mixed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 16px;
}

/* Explicitly positioned */
.header {
  grid-column: 1 / -1;
  grid-row: 1;
}

.sidebar {
  grid-column: 4;
  grid-row: 2 / 4;
}

/* Auto-placed around explicit items */
.content-item {
  /* No position specified - auto-placed */
}

Grid Template Shorthand

The grid shorthand can set both explicit and implicit grid properties:

CSS

.grid {
  /* grid: <rows> / <columns> */
  grid: auto-flow 200px / repeat(3, 1fr);
  /* Equivalent to:
     grid-template-columns: repeat(3, 1fr);
     grid-auto-flow: row;
     grid-auto-rows: 200px; */
}

/* Column auto-flow */
.grid-col {
  grid: repeat(3, 100px) / auto-flow 200px;
  /* Equivalent to:
     grid-template-rows: repeat(3, 100px);
     grid-auto-flow: column;
     grid-auto-columns: 200px; */
}

/* Dense packing */
.grid-dense {
  grid: auto-flow dense 150px / repeat(4, 1fr);
}

Responsive Auto-Placement

CSS

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(16px, 3vw, 32px);
}

/* Items adapt automatically */
.responsive-grid > * {
  /* Auto-placed, responsive sizing */
}

/* Large items at wider viewports */
@media (min-width: 800px) {
  .responsive-grid .featured {
    grid-column: span 2;
  }
}

Debugging Auto-Placement

Browser DevTools show implicit tracks with dashed lines (vs solid for explicit). Use this to understand how your grid is being constructed.

CSS

/* Add outline to see grid areas */
.debug-grid > * {
  outline: 1px solid red;
}

Summary

Auto-placement and implicit grids make CSS Grid incredibly flexible for dynamic content. Control implicit track sizes with grid-auto-rows and grid-auto-columns. Use grid-auto-flow to change direction or enable dense packing. Mix explicit positioning with auto-placement for complex layouts. Understanding these automatic behaviors lets you build layouts that gracefully handle any amount of content without additional styling.