How Does Grid Auto Placement Work?

.grid {
  display: grid;
  grid-auto-flow: row; /* Default */
  grid-auto-flow: column;
  grid-auto-flow: dense; /* Fill gaps */
  grid-auto-flow: row dense;
}

/* auto-fill: creates empty tracks */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: collapses empty tracks */
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

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

/* Large items span 2 columns */
.large {
  grid-column: span 2;
}
/* Small items fill gaps automatically */