.grid {
  margin: 0 auto;
  width:100%;
  height:90vh;
  display: grid;
  grid-gap: 1em 2ch;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.grid > * {
  background-color: lightgray;
  text-align:center;
}
.col.w1 { grid-column-end: span 1; }
.col.w2 { grid-column-end: span 2; }
.col.w3 { grid-column-end: span 3; }
.col.w4 { grid-column-end: span 4; }
.col.w5 { grid-column-end: span 5; }
.col.w6 { grid-column-end: span 6; }

.col.h1 { grid-row-end: span 1; }
.col.h2 { grid-row-end: span 2; }
.col.h3 { grid-row-end: span 3; }
.col.h4 { grid-row-end: span 4; }

.col.l1 { grid-column-start: 1; }
.col.l2 { grid-column-start: 2; }
.col.l3 { grid-column-start: 3; }
.col.l4 { grid-column-start: 4; }
.col.l5 { grid-column-start: 5; }
.col.l6 { grid-column-start: 6; }

.col.t1 { grid-row-start: 1; }
.col.t2 { grid-row-start: 2; }
.col.t3 { grid-row-start: 3; }
.col.t4 { grid-row-start: 4; }

<div class="grid">
  <div class="col w2 h3">
     A
  </div>
    <div class="col w3 h2">
     B
  </div>
  <div class="col t4 w6">
     C
  </div>
  <div class="col l3 t3 w4">
     D
  </div>
  <div class="col l6 h2">
     E
  </div>
</div>

With CSS variables

:root {
  --x: 1;
  --y: 1;
  --w: 1;
  --h: 1;
}

.grid {
  margin: 0 auto;
  width:100%;
  height:90vh;
  display: grid;
  grid-gap: 1em 2ch;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.grid > * {
  grid-column-start: var(--x);
  grid-row-start: var(--y);  
  grid-column-end: span var(--w);
  grid-row-end: span var(--h);
}

.grid > * {
  background-color: lightgray;
  text-align:center;
}

.header-a {
  --x:2;
  --y:3;
  --w:5;
  --h:2;
}

@media (min-width:1200px) {
 .header-a {
    --w:2;
  } 
}

<div class="grid">
  <div class="header-a"> A </div> 
  <div style="--w:6;--h:2"> B </div> 
  <div style="--y:3;"> C </div> 
  <div style="--y:4;"> D </div> 
</div>