<div class="grid-container"> 
    <div class="grid-item item1">item1</div>
    <div class="grid-item item2">item2</div>
    <div class="grid-item item3">item3</div>
    <div class="grid-item item4">item4</div>
    <div class="grid-item item5">item5</div>
    <div class="grid-item item6">item6</div>
    <div class="grid-item item7">item7</div>
</div>
body{
  margin: 0;
  padding: 0;
}
.grid-container{
  display: grid;
  height: 300px;
  grid-gap: 5px;
  grid-template-columns: [c1] 150px [c2] 1fr [c3] 2fr [c4];
  grid-template-rows: [r1] 150px [r2] 1fr [r3] 2fr [r4];
}
.grid-item{
  background-color: #efefef;
  border: 1px solid #ddd;
}

/*「grid-template-columns」「grid-template-rows」で指定した以外の大きさのレイアウト*/
.item4 {
  grid-column: c1 / c3;
  grid-row: r2 / r3;
}
.item5 {
  grid-column: 3 / 4;
  grid-row: 2 / span 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.