<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(3, 1fr);
	grid-auto-rows: 100px;
	gap: 20px;
	border: 2px solid white;
	flex: 1 1 auto;
	margin: 20px;
	padding: 20px;
	counter-reset: grid;
	
	.item {
		padding: 20px;
		
		&::after {
			counter-increment: grid;
			content: counter(grid);
		}
		
		&:last-child:nth-child(3n - 1) {
			grid-column: span 2;
		}
		
		&:last-child:nth-child(3n - 2) {
			grid-column: span 3;
		}
	}
}

.item {
	background: #E91E63;
}

.grid--2 {
	.item {
		background: #26C6DA;
	}
}