Grid auto-placement & Subgrid

Grid auto-placement & subgrid

Go deeper: automatic placement and alignment across nested grids.

grid-auto-flow

How auto-placed items fill the grid:

.grid {
  display: grid;
  grid-auto-flow: row;        /* fill rows (default) */
  grid-auto-flow: column;     /* fill columns */
  grid-auto-flow: dense;      /* backfill holes */
}

Auto rows/columns

.grid {
  grid-auto-rows: 100px;      /* implicit row height */
  grid-auto-columns: minmax(80px, 1fr);
}

subgrid

Let a nested grid ALIGN to the parent's tracks:

.outer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.inner {
  display: grid;
  grid-template-columns: subgrid;   /* match outer tracks */
}

Items in .inner line up with the outer grid columns. Huge for aligned card layouts.

TL;DR

• grid-auto-flow: dense backfills gaps.
• grid-auto-rows/columns size implicit tracks.
• subgrid inherits the parent's grid lines.
• Perfect for aligning cards and form rows.