Rows the grid makes for you in CSS

You size the columns; the rows keep arriving whether you planned them or not.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(8rem, auto);
  grid-auto-flow: row dense;
  gap: 1rem;
}

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

.sidebar-layout {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
}

How it works

1. grid-auto-rows sizes every row the grid creates implicitly.
2. grid-auto-flow: dense backfills holes, at the cost of source order.
3. minmax() with auto lets a row grow past its floor.

Keywords and builtins used here

• display
• gallery
• gap
• grid
• minmax
• rem
• repeat
• tall
• wide

The run, in numbers

Lines

16

Characters to type

317

Tokens

83

Three-star pace

80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 62 seconds.

Type this snippet

Step 6 of 7 in Grid, step 12 of 24 in Flexbox & grid.

← Previous Next →