Gallery Styled using Grid

Inspect grid options in the browser's Web Dev Inspector grid popup.

Give the <article> a class called gallery, then style that class in main.css.

In main.css, give the .gallery {} selector a display:grid; and the grid-template-columns:__ properties. Then, in the .gallery figure {} rule, specify width and embellish with color, borders, shadows, and margin/padding.

Stretch the browser window wider and skinnier to see how the figures sit side-by-side in sets 1 or 3 columns. Grid is overly complex. Read more at A Complete Guide to CSS Grid by CSS-Tricks.

To see other Grid options in action, use the WebDev/Inspector tool in the browser (Chrome) to click on a block that has display:grid applied to it, then click the grid icon to access the clickable popup Grid modal.

Grandma Crackers and her granddaughter birdwatching.
Adventures of Grandma Crackers animation demonstration (2017)
The Leaky Pipeline (2021)
The Leaky Pipeline (2021)
The Cultural Lens interactive diagram.
The Cultural Lens interactive lesson (2010, 2015)
The Cascading Style Sheets Box Model interactive diagram.
The CSS Box Model interactive lesson (2015)