<div class="wrapper">
	<div class="grid grid--1">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>

	<div class="grid grid--2">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	background: #212121;
	padding: 20px;
}

.wrapper {
	display: flex;
	flex-wrap: wrap;
	max-width: 1400px;
	margin: 0 auto;
}

.grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 100px;
	gap: 20px;
	border: 2px solid white;
	flex: 1 1 auto;
	margin: 20px;
	padding: 20px;
	counter-reset: grid;
}

.item {
	background: #AB47BC;
	padding: 20px;
	grid-column: span 2;
		
	&::after {
		counter-increment: grid;
		content: counter(grid);
	}

	/* Dealing with 2 orphan items */
	&:last-child:nth-child(3n - 1) {
		grid-column-end: -2;
	}
	
	&:nth-last-child(2):nth-child(3n + 1) {
		grid-column-end: 4;
	}

	/* Dealing with single orphan */
	&:last-child:nth-child(3n - 2) {
		grid-column-end: 5;
	}
}

.grid--2 {
	.item {
		background: #D4E157;
	}
}