22 min read

CSS Grid: a Photo Gallery

Use display: grid with repeat(auto-fill, minmax()) to build a gallery that fits any screen, with equal-sized images.

What Is CSS Grid?

Flexbox or Grid?

$Flexbox$	$Grid$
$One direction at a time (a row or a column)$	$Rows and columns together$
$Content decides the size$	$The grid decides the size$
$Navigation bars, rows of buttons, cards that wrap$	$Galleries, page layouts, dashboards$

What the browser shows

Try it:

Change minmax(150px, 1fr) to minmax(250px, 1fr) — fewer, larger columns. Try grid-template-columns: repeat(2, 1fr) for exactly two columns.

Practice

grid-template-columns: 1fr 2fr; — how is the width shared?

What Is CSS Grid?

Flexbox or Grid?

$Flexbox$	$Grid$
$One direction at a time (a row or a column)$	$Rows and columns together$
$Content decides the size$	$The grid decides the size$
$Navigation bars, rows of buttons, cards that wrap$	$Galleries, page layouts, dashboards$

The Gallery Grid

What the browser shows

Try it:

Change minmax(150px, 1fr) to minmax(250px, 1fr) — fewer, larger columns. Try grid-template-columns: repeat(2, 1fr) for exactly two columns.

The Magic Line

Practice

grid-template-columns: 1fr 2fr; — how is the width shared?