Верстка сетки с помощью Flex

html, body { 
    margin: 0; 
    padding: 0; 
} 
 
.container { 
    height: 100vh; 
    display: flex; 
    background-color: #ccf; 
} 
 
.col1 { 
    background-color: yellow; 
    width: 50%; 
} 
 
.col2 { 
    width: 50%; 
    display: flex; 
    flex-direction: column; 
} 
 
.col2-top { 
    height: 50%; 
    display: flex; 
} 
 
.col2-top-left { 
    width: 50%; 
    background-color: red; 
} 
 
.col2-top-right { 
    width: 50%; 
    background-color: red; 
} 
 
.col2-bottom { 
    background-color: blue; 
    height: 50%; 
}

<div class="container"> 
    <div class="col1">col1</div> 
    <div class="col2"> 
        <div class="col2-top"> 
            <div class="col2-top-left">col2-top-left</div> 
            <div class="col2-top-right">col2-top-right</div> 
        </div> 
        <div class="col2-bottom">col2-bottom</div> 
    </div> 
</div>