Estoy tratando de crear una galería de imágenes usando un diseño de caja flexible. Así es como se supone que debe verse al final:

Esto es básicamente solo un flexbox con imágenes dentro:

 <div class="flexbox-grid"> <img src="https://i.imgur.com/DjLPhu1.png"> ... </div> .flexbox-grid { display: flex; flex-wrap: wrap; } img { margin: 10px; }

Pero ahora quiero agregar secciones a grupos de imágenes para algunos scripts js. Como esto:

 <section id="first"> <img src="https://i.imgur.com/DjLPhu1.png"> </section> <section id="second"> <img src="https://i.imgur.com/DjLPhu1.png"> <img src="https://i.imgur.com/DjLPhu1.png"> <img src="https://i.imgur.com/DjLPhu1.png"> </section>

Por supuesto, esto estropea completamente el diseño de la cuadrícula, ya que ahora las imágenes agrupadas se mantienen juntas:

¿Cómo agrego secciones (o divs) aquí y sigo manteniendo el diseño de cuadrícula inicial? Los elementos para los que realmente quiero tener un flexbox son los elementos secundarios de las secciones, no las secciones en sí.

Aquí está el código: https://jsfiddle.net/8f2mv7cb/1/

Gracias de antemano.