<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.