Accomplishing this grid with css - html

Question

Can I accomplish this grid layout with flexbox? To have the first element take up 2 rows height and then continue after it?
Check image.

Answer 1

You can achive it by dividing this layout in 2 columns while the 2nd column will have a nested flexbox layout as well.
HTML Structure:
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>
Necessary Styles:
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
flex-grow: 1;
}
.box1 {
display: flex;
}
* {box-sizing: border-box;}
body {
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
}
.col {
flex-grow: 1;
color: #fff;
}
.col2 {
flex-wrap: wrap;
display: flex;
}
.col2 > div {
flex-basis: 50%;
padding: 10px;
flex-grow: 1;
}
.box1 {
background: brown;
padding: 10px;
display: flex;
}
.box2 {
background: pink;
}
.box3 {
background: black;
}
.box4 {
background: yellow;
}
.box5 {
background: royalblue;
}
<div class="container">
<div class="col box1">1</div>
<div class="col col2">
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</div>

Answer 2

You can use this HTML structure but you need to set fixed height on parent div. Then you just use flex-direction: column and flex-wrap: wrap.
* {
box-sizing: border-box;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
div div:first-child {
flex: 0 0 100%;
width: 50%;
background: #880015;
}
div div:not(:first-child) {
width: 25%;
flex: 0 0 50%;
border: 1px solid black;
}
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>