<div class="wrapper">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
.wrapper > div {
background-color: orange;
border: 1px black solid;
}
.wrapper > div:nth-child(odd) {
background-color: indianred;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 5px;
}
.div1{
grid-column: 1/3;
grid-row: 1/3;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.