<div class="grid">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
<div class="item8"></div>
<div class="item9"></div>
<div class="item10"></div>
<div class="item11"></div>
<div class="item12"></div>
<div class="item13"></div>
<div class="item14"></div>

</div>

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 100px 100px [main-start] 1fr [main-end] 100px 100px;
  grid-template-rows: 100px [main-start] 100px 100px [main-end] 100px;
}

[class^="item"] {
  background-color: blue;
}

.item1 {
  background-color: red;
  grid-area: main;
}