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