Flex Layout mixing rows and column - css

Question

I can make this layout using float easily. but having hard time to do with flex box.
css :
.a {
background: red;
float: left;
width: 30%;
height: 100px;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue
}
html:
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
many thanks in advance.

Answer 1

Flexbox codepen demo
How does it work?
Wrap your columns in a common parent (e.g. a main element) with an height set. Then place your elements with flex-direction: column and create a space between b and c with justify-content: space-between.
The height of the column a is 100% of the container so b and c can shift into a new column thanks to flex-wrap: wrap.
CSS
main {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
height: 100px;
}
.a {
background: red;
height: 100%;
width: 30%;
}
.b, .c {
background: green;
height: 45px;
width: 70%;
}
.c {
background: lightblue
}
Grid Layout demo
How does it work?
With Grid Layout you could achieve the same thing by creating a layout with 10 columns and 2 rows and a gap between b and c with row-gap: 10px. Then adjust all the various (column|row)-(start|end)
CSS
main {
display: grid;
grid-template-columns: repeat(10, 1fr);
row-gap: 10px;
width: 100%;
}
.a {
background: red;
grid-area: 1 / 1 / 3 / 3;
}
.b,
.c {
grid-column: 3 / 11;
background: green;
overflow: hidden;
height: 45px;
}
.b {
grid-row-start: 1;
}
.c {
grid-row-start: 2;
background: lightblue;
}

Answer 2

You can achieve this by using grid by wrapping a,b,c in a grid-container
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.a {
background: red;
/* width: 30%; */
height: 100px;
grid-row-start: 1;
grid-row-end: 3;
}
.b,
.c {
background: green;
overflow: hidden;
height: 45px;
}
.b {
margin-bottom: 10px;
}
.c {
background: lightblue;
}
<div class="grid-container">
<div class="a">column</div>
<div class="b">row1</div>
<div class="c">row2</div>
</div>