Images appear next to each other rather than under - html

Question

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>

Answer 1

.row {
width: 100%;
display: flex;
height: 100%;
}
.columns {
width: 33%;
display: flex;
flex-direction: column;
height: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
<div class="row">
<div class="columns red">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
</div>
<div class="columns blue"> <img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
</div>
<div class="columns red"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
<img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
</div>
</div>
here is a simple demostration using flex, hope it can help