<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(2,100px);
grid-gap: 1px;
background-color: #000;
width: 403px;
height: 201px;
border:1px solid #000;
margin: 10px auto;
}
.grid > div {
background-color: #fff;
}
.grid::after {
content: " ";
background-color: red;
grid-column: 2 / 4;
grid-row: 1 / 3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.