<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;
}