<figure class="fig">
	<div class="grid grid--a">
		<div class="item"></div>
		<div class="item item--placed"></div>
		<div class="item"></div>
		<div class="item item--order"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</figure>

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 60px;
}

figure {
	margin: 0;
}

figcaption {
	margin: 0 0 20px 0;
}

:root {
	--columns: 2;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 120px);
	gap: 20px;
	border: 2px dotted;
	counter-rest: item;
	max-width: 40rem;
	margin: 60px auto;
}

.item {
	background: linear-gradient(135deg, sandyBrown, chocolate);
	counter-increment: item;
	padding: 20px;
}

.item::after {
	content: counter(item);
}

.item--placed {
	background: linear-gradient(135deg, powderBlue, steelBlue);
}

.item--implicit {
	background: linear-gradient(135deg, mediumPurple, blueViolet);
}

.grid--a {
	.item--placed {
		grid-row: 3;
		grid-column: 2 / span 2;
		order: -1;
	}
	
	.item--order {
		order: -1;
		background: linear-gradient(135deg, darkViolet, indigo);
	}
}