How to create CSS box layouts?

Question

I'm quite new to web development and I would like to create this in CSS and HTML:

I am unsure how to do this as I am only 13 and still learning.

What I have tried but failed miserably with:

.grey{
  height:300px;
  width:700px;
  background-color: #e5e5e5;
    z-index: 0;
}
.pink{
    height:150px;
  width:100px;
  background-color:#ff8a8a;
  padding-top: 0px;
  padding-right:0px;
  z-index: 1;
}

<div class="grey">   
<div class="pink"> </div>
  </div>

Answer 1

Use CSS-grid which is built-in within CSS. See code snippet.

.wrapper {
  display: grid;
  grid-template-columns:
  40%
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  100px
  ;
  grid-template-areas:

  "box-1 box-2 box-4"
  "box-1 box-3 box-5"
  ;
  }

.box-1 {
  grid-area: box-1;
  background-color: grey;
}

.box-2 {
  grid-area: box-2;
  background-color: orange;
}

.box-3 {
  grid-area: box-3;
  background-color: lightblue;
}

.box-4 {
  grid-area: box-4;
  background-color: red;
}

.box-5 {
  grid-area: box-5;
  background-color: lightgreen;
}

<div class="wrapper">

  <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>

Answer 2

Using flex:

.container {
  display: flex;
  justify-content: flex-start;
  background-color: #e5e5e5;
}

.box {
  height:150px;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.square {
  height: 50%;
  width: 50%;
}

.square--pink {
  background-color: #fb7378;
}

.square--orange {
  background-color: #fcbd8b;
}

.square--blue {
  background-color: #8ce0fd;
}

.square--green {
  background-color: #7cff83;
}

<div class="container">   
  <div class="box"></div>
  <div class="box">
    <div class='square square--pink'></div>
    <div class='square square--orange'></div>
    <div class='square square--blue'></div>
    <div class='square square--green'></div>
  </div>
</div>

You should look over the css box model btw, it would help you better understand how to structure your HTML for your css :).