How to combine containers in a flexbox layout? - css

Question

I have a simple flexbox layout like this:
html, body {
margin:0;
padding:0;
background:grey;
}
.container {
display:flex;
flex-direction:row;
}
.image1, .image2, .image3, .image4, .image5, .image6 {
padding:10px;
}
img {
max-width:100%;
}
<div class="container">
<div class="image1">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image2">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image3">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
<div class="container">
<div class="image4">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
<div class="container">
<div class="image5">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image6">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
I am currently doing it with 3 seperate flex containers, I am trying to combine everything in to 1.
Am I able to do this with flexbox or would CSS grid be more appropriate?

Answer 1

Am I able to do this with flexbox
Yes, using flex-wrap property and wrap value, which will force items to wrap onto multiple lines.
html, body {
margin: 0;
background: grey;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image {
padding: 10px;
box-sizing: border-box;
}
img {
width: 100%;
}
.third {
width: 33.333%;
}
.half {
width: 50%;
}
.full {
width: 100%;
}
<div class="container">
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image third">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image full">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image half">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image half">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
You could make it even shorter, using flex instead of width.
html, body {
margin: 0;
background: grey;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image {
flex: 1 0 0;
padding: 10px;
box-sizing: border-box;
}
.image.full {
flex: none;
width: 100%;
}
img {
width: 100%;
}
<div class="container">
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image full">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>

Answer 2

The layout (with a single container) is relatively easy and simple using CSS Grid.
Use Grid's line-based placement techniques to position grid items and create grid areas.
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 10px;
}
.image1, .image2, .image3 {
grid-column: span 2;
}
.image4 {
grid-column: 1 / -1;
justify-self: center; /* optional */
}
.image5, .image6 {
grid-column: span 3;
}
img {
max-width: 100%;
}
body {
margin: 0;
padding: 10px;
background: grey;
}
<div class="container">
<div class="image1">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image2">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image3">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image4">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image5">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
<div class="image6">
<img src="https://dummyimage.com/1000x400/000/fff">
</div>
</div>
jsFiddle demo