Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non imperdiet risus. Aliquam erat volutpat. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla egestas eget turpis ac fringilla. Maecenas blandit est eu ultrices placerat. Ut ullamcorper tristique metus vel scelerisque. Morbi maximus facilisis ex, vel semper lacus sodales nec. Etiam nec libero nec diam vestibulum auctor et quis mauris. Cras fringilla rutrum lorem sed finibus. Suspendisse eu tortor vitae augue faucibus placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Aliquam cursus odio nec maximus luctus. Nulla et quam at ipsum condimentum mollis. Vestibulum ac enim vel ligula viverra vehicula. Dimg-1c volutpat purus nec nisi sodales, eget imperdiet eros malesuada. Quisque odio urna, dignissim luctus accumsan a, volutpat id turpis. Maecenas aliquet eros nisl, non blandit enim malesuada vitae. Sed pellentesque mi eu nibh efficitur facilisis. Dimg-1c velit arcu, consequat vitae varius ullamcorper, tempus sit amet orci. Curabitur consectetur justo scelerisque purus consectetur ullamcorper vel a lectus. Vivamus turpis dolor, suscipit vel sagittis ac, sagittis a risus. Pellentesque malesuada elit diam, eu vehicula massa placerat consectetur. Duis turpis felis, pharetra id turpis a, vulputate finibus purus.

View this post on Instagram

A post shared by MYCOLOGOS (@mycologos)

Quisque feugiat arcu sed consectetur gravida. Vivamus at feugiat erat. Sed vitae ipsum ut diam facilisis eleifend quis in augue. In facilisis mi id auctor interdum. Sed tincidunt arcu nec tortor cursus fermentum. Cras aliquam, augue vitae gravida mollis, ante risus commodo sapien, scelerisque molestie dui nisi vel libero. Sed pretium diam neque, id dictum neque cursus quis. Suspendisse vel ipsum tempus, facilisis nibh non, congue nunc. Sed quis augue sed magna finibus pretium. Ut tempor ultricies ornare. Aliquam erat volutpat. Aenean sed suscipit lorem. Proin molestie dui molestie tristique accumsan. Nunc rutrum tortor eu turpis dapibus condimentum. Nam non luctus elit.

Mauris auctor, quam vitae vulputate porta, leo dui dictum erat, non consectetur arcu massa ac felis. Nam cursus, neque ac eleifend bibendum, nulla ligula iaculis neque, vel ullamcorper ante lacus sit amet quam. Praesent ut elementum erat, a porta est. Nunc in venenatis nunc, et eleifend augue. Etiam non orci odio. Suspendisse consequat erat sed ante facilisis, sit amet varius dui tempus. Vivamus quis tempus nulla. Sed interdum mollis libero ut rutrum. Proin ornare est augue, ut commodo elit consectetur a.

I've set up two classes for image "containers", the first is the "single-row-myco-images" class, the second is "multi-row-myco-images." Both are applied to a div that wraps your images. The first takes in images with different classes img-1 - img-12, the sum of which should total 12 or less. The "multi-row-myco-images" class takes as many images as you want to throw into it, and will wrap them to the next line any time the total of a sequence of images totals more than 12 (see last image container for an example).

The images above each have a class of img-3, which means they take up 3 spaces each of the total 12 spaces of the screen width. Total width = 9/12

The first and last images above each have a class of img-4, which means they take up 4 spaces each, with the central img-2 taking up 2/12 of the screen. Total width = 10/12 (this is why it's wider than the above row)

The above row follows the pattern of img-3, img-3, img-1, img-3, for a total width of 10/12 (same total width as above)

The above images are all img-3, so they're all equal width. 12/3 = 4, so each takes up 1/4 of the screen's total width. Total width = 12/12, full screen

note the class of the div element above, it's "multi-row-myco-images", this is set up to take as many images as you want to add to it, and they'll wrap. The above pattern is:
3 3 2 3
(11 total at this poing, adding the next image's value would equal 13, so it wraps here after the fourth image)
2 4 3 2 (11 total, same as above so it lines up nicely)

The CSS is set up to limit image height to less than 650px, but you can override this by adding the height="300px" attribute, with the pixel or other unit value you want to use. This allows you to vary row height to keep things fresh. Keep in mind that if the height is much smaller than 650px, the flex may sometimes wrap in unexpected ways on larger screens.

Another way to think of this is by percentage of full screen width:

• 1 = 8.3%
• 2 = 16.6%
• 3 = 25%
• 4 = 33.3%
• 5 = 41.6%
• 6 = 50%
• 7 = 58.3%
• 8 = 66.6%
• 9 = 75%
• 10 = 83.3%
• 11 = 91.6%
• 12 = 100%

Styling has been written that takes into account using a single large image, like a hero. This can be any width, but here it's an .img-10: