Display flex with mixed design [duplicate] - html

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Flex box masonry in one flex-container
(1 answer)
Closed 3 years ago.
What would be the best way to make the following with flexbox? I would like 2 rows that are equal width columns, however, the last column to be 100% height and fill the rest of the section.
Would it be best to use multiple rows for this?
.row {
display: flex;
flex-wrap: wrap-reverse;
}
.col {display:1;width:30%;background:red;}
.col:nth-of-type(3) {background:blue;}
<div class="row">
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
<div class="col">
test
</div>
</div>

Answer 1

Here is a solution using CSS grid layout:
Define the row as grid container using display: grid.
Define the 3-column layout by using grid-template-columns: repeat(3, 1fr)
Define the 2-column layout by using grid-template-rows: repeat(2, 1fr)
Span the third column to all the rows by using grid-row: span 2.
Adjust the gaps between the rows & columns using grid-gap property.
See demo below:
.row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: repeat(2, 1fr); /* 2 equal rows */
grid-gap: 10px; /* gap between the rows & columns */
}
.col {
background: red;
}
.col:nth-of-type(3) {
background: blue;
grid-row: span 2; /* span all the rows */
}
<div class="row">
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
<div class="col">test</div>
</div>