Looking to have 3 columns across 2 rows with the content only being images

Question

I've been trying to create a column that has a 3 across the top by two rows down. So far I've only been able to create the first row but I don't know how to break it onto the second row.

.container {
  display: flex;
  justify-content: space between;
}

.column {
  display: inline block;
  padding: 0.5em;
  display: block;
  width: 33.333%;
}

<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>      

Answer 1

You almost had it, you are just missing a couple of CSS rules:

.container {
    display: flex;
    justify-content: space between;
    flex-wrap: wrap; /* added - this tells Flex to wrap onto a new line, if there is no space. */
}

.column {
    display: inline block;
    padding: 0.5em;
    display: block;
    width: 33.333%;
    box-sizing: border-box; /* added - this changes the way padding is applied, so it always stays at 33.33%, regardless of padding */
}

Additionally, if you want, you can add this style to make it look a bit nicer:

.column img {
    display: block; /* removes the spacing underneath the image */
    width: 100%; /* sets the width to the parents width */
    height: 100%; /* set the height to the parents height */
    object-fit: cover; /* prevents image from stretching */
}

Demo: https://jsfiddle.net/yx6h4emn/