How to get this flexbox container to behave like I want it to in the design?

Question

Im trying to mimic the design but the flexbox isn't behaving like I want it to be, this is the html code :

<section class="gallery">
        <div class="container">
            <h1>GALLERY</h1>
            <div class="gallery-container">
                <img src="Images/gallery1.png" alt="">
                <img src="Images/gallery2.png" alt="">
                <img src="Images/gallery3.png" alt="">
                <img src="Images/gallery4.png" alt="">
                <img src="Images/gallery5.png" alt="">
                <img src="Images/gallery6.png" alt="">
            </div>
            <img class="downarrow" src="Images/downarrow.png" alt="">
        </div>
    </section>

and this is the css code

.gallery .container .gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 10px;
}

Answer 1

Wouldn’t you have to add something like flex: 1;