Inger wrote:
Here are the flex and margin settings I used:

The column: Display flex, then down the list: row, wrap, center, stretch, stretch. All the way from small to large.
The containers: Display flex, then column, no-wrap, center, center, stretch. At some larger breakpoint I adjusted it to
column, no-wrap, flex-start, center, flex-start.
The images: display block, width 100%, started 150px max-width, then increased to 250 and 320. It will be up to you how wide you want the images.
The title: display block, header 5, started at 14px font size, increased to 16px
Margins on the containers: 2px bottom margin at larger br.points
Margins on pictures: 5, 5, 15, 5 (top-right-bottom-left), increased to 10, 10, 15, 10.
Margins on titles: 8px (0.5 rem) bottom.

Wayan Jaya wrote:
The first video is just 3 columns each with 3 images (auto centered left right)

each column is set
position = flex
display = row
wrap = wrap (at lower points where only 2 images on top & 1 underneath)
justify = space around
items = center
contents = stretch
the images are set to 50% width

at the point where you want all 3 images in a row
column is same except change wrap to no-wrap and items to flex-start

change width of images to whatever you desire as can be fitted onto the column

The second example is just using 9 columns each with an image auto centered as normal (left/right auto:
no flexing

at lower end each column is set to 6 spans except the last one which is set to 12 spans

where you want 3 images in a row set the column width to 4 spans each (adjust image width accordingly as you please

Inger wrote:
It's no pain at all!