html - Images appear next to each other rather than under

So to explain my situation: I am trying to build a page on shopify wherein images will appear like so:

Right. So I have tried to build a shopify section where trough the shopify website customizer you are supposed to be able to put in images and it should appear like the image.

The issue is: With the current code that I have, the first 3 images work really nicely and appear next to eachother, but when I go to make another block and add 3 new pictures, they appear like so:

I only want 3 images on the page, not more. I want it to appear under the first 3, and then the next 3 to also appear under the last 3 etc etc etc.

Here is my code:

<div class="gallery">
  <div class="col">
        {% for block in section.blocks %}
        <div class="image">
          <img src="{{ block.settings.editorial_image | img_url: 'master' }}">
        </div>
  </div>
  <div class="col">
        <div class="image">
          <img src="{{ block.settings.editorial_image2 | img_url: 'master' }}">
        </div>
  </div>
  <div class="col">
      <div class="image">
            <img src="{{ block.settings.editorial_image3 | img_url: 'master' }}">
      </div>
  </div>
  {% endfor %}
</div>

{% schema %}
{
  "name": "EditorialTest2",
  "tag": "section",
  "class": "gallery",
  "max_blocks": 9,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Editorial"
    }
  ],
  "blocks": [
     {
       "name": "PictureBlock",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "editorial_image",
           "label": "Image"
           },
                  {
           "type": "image_picker",
           "id": "editorial_image2",
           "label": "Image"
           },
                  {
           "type": "image_picker",
           "id": "editorial_image3",
           "label": "Image"
           }
       ]
     }
   ],
   "presets": [
    {
      "name": "Editorial Section Test 2"
    }
  ]
  }
{% endschema %}

<style>
  .gallery {
    display: flex;
  }

  @media only screen and (max-width: 560px) {
    .gallery {
      flex-direction: column;
    }
  }
  .image img {
    width: 100%;
  }
</style>
Copy code