* {box-sizing: border-box;}

by Nightythehawk

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas -->

<div class="wrapper">
   <div class="gridheader">Item</div>
   <div class="item2">item2</div>
   <div class="item3">item3</div>
   <div class="mod1">Mod1</div>
   <div class="mod2">Mod2</div>
   <div class="mod3">Mod3</div>
   <div class="mod4">Mod4</div>

</div>

CSS

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  text-align: center;
  grid-template-rows: 50px 50px;
  grid-template-columns: 1fr 1fr;

}
.gridheader {
  grid-column: 1 / 1;
  grid-row: 2 / 4;
}
.item2 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}
.item3 {
  grid-column: 2 / 2;
  grid-row: 2 / 4;
}
.mod1 {
    grid-area: 4;
}
.mod2 {
    grid-area: 5;
}
.mod3 {
    grid-area: 6;
}
.mod4 {
    grid-area: 7;
}