How could I do this by grid layout?

Question

There are three children dive in a parent container (div):

.grid-container {
  display: grid;

.grid-container > div {
 height:auto;
width: auto;
}
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
</div>

Answer 1

Please find the following code. This will help you in making the required structure.

:root {
  --wrapper: 100vw;
  --gutter: 10px;
  --noOfColumns: 4;
  --noOfGutters: calc(var(--noOfColumns) - 1);
  --ratioA: 16;
  --ratioB: 9;
  --factor: calc(var(--ratioB) / var(--ratioA));
  --rh: calc(( (var(--wrapper) - (var(--noOfGutters) * var(--gutter)))
    / var(--noOfColumns)) * var(--factor));
}

.grid {
  max-width: var(--wrapper);
  display: grid;
  grid-template-columns: repeat(var(--noOfColumns), 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(var(--rh), auto);
}

.grid__item {
  background-color: steelBlue;
  padding: 20px;
}

.grid__item--lg {
  grid-column: span 2;
  grid-row: span 2;
  background-color: coral;
}

.grid__item--right {
  grid-column: 3/span 2;
}

.grid__item--db {
  grid-column: span 2;
  background-color: lightBlue;
}

.steelBlue {
  background-color: steelBlue;
}

<div class="grid">
    <div class="grid__item grid__item--lg grid__item--right">1</div>
    <div class="grid__item grid__item--db">2</div>
    <div class="grid__item grid__item--db steelBlue">3</div>
</div>