<div class="grid">
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
<div class="grid__item"></div>
</div>
<div class="grid grid--2">
<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 {
--start1: 1;
--end1: 3;
--end2: 11;
--end3: 5;
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 20px;
margin-bottom: 50px;
padding-bottom: 50px;
&:first-child {
border-bottom: 1px solid grey;
}
}
.grid__item {
background-color: blue;
&:nth-child(even) {
background-color: red;
}
&:nth-child(1) {
grid-column: var(--start1) / var(--end1);
}
&:nth-child(2) {
grid-column: calc(var(--end1) + 3) / var(--end2);
}
&:nth-child(3) {
grid-column: var(--start1) / var(--end3);
}
&:nth-child(4) {
grid-column: calc(var(--end3) + 3) / var(--end2) ;
}
}
.grid--2 {
--start1: 2;
--end1: 6;
--end2: 13;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.