Gallery Styled using Column-count

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

In main.css, give the .gallery {} selector a column-count:__ and the column-gap:__ properties. Then, in the .gallery figure {} rule, specify margin:0;

It is customary to assign the count to 1 for viewing on a phone, but with increasing counts depending on the width of the device. This example provides 2 for the skinnier window and 4 for a wider window. This change is handled using an @media query.

Stretch the browser window wider and skinnier to see how the figures sit side-by-side in sets of 2 or 4. This method has a flaw...do you see how the figcaption gets added to the second column?

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)