Responsive grid box with image automatically resize

Question

assume I try to get almost similar kind of result.

So i write this code to get this this kind of box . But the code is not complete Please see my code ,

Answer 1

Here is a simple solution using Flexbox where you can easily adjust the different sizes:

body {
  margin: 0;
}
* {
 box-sizing:border-box;
}
div {
  border:1px solid #fff;
}

.container {
  display: flex;
  height: 100vh;
}

.left {
  flex: 3;
  display:flex;
  flex-wrap:wrap;
}
.left > div:nth-child(1) {
  width:100%;
  height:40%;
  background:red;
}
.left > div:nth-child(2) {
  width:33%;
  height:60%;
  background:red;
}
.left > div:nth-child(3) {
  flex:1;
  background:blue;
}

.right {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
  height:25%;
  background:red;
}
.right > div:nth-child(2) {
  flex:1;
  background:blue;
}