<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(50px, auto);
grid-gap: 20px;
}
.grid__item {
--col1Start: 1;
--col1End: 6;
--row1Start: 1;
--row1End: 6;
--col2Start: 10;
--col2End: 13;
--row2Start: 6;
--row2End: 10;
grid-column: var(--colStart) / var(--colEnd);
grid-row: var(--rowStart) / var(--rowEnd);
background-color: #00ACC1;
&:first-child {
--colStart: var(--col1Start);
--colEnd: var(--col1End);
--rowStart: var(--row1Start);
--rowEnd: var(--row1End);
}
&:nth-child(2) {
--colStart: calc(var(--col1End) - 1);
--colEnd: calc(var(--col1End) + 2);
--rowStart: calc(var(--row1End) - 1);
--rowEnd: calc(var(--row1End) + 2);
background-color: orange;
}
&:nth-child(3) {
--colStart: var(--col2Start);
--colEnd: var(--col2End);
--rowStart: var(--row2Start);
--rowEnd: var(--row2End);
}
&:nth-child(4) {
--colStart: calc(var(--col2Start) - 1);
--colEnd: calc(var(--col2Start) + 1);
--rowStart: calc(var(--row2End) - 1);
--rowEnd: calc(var(--row2End) + 1);
background-color: orange;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.