<section>
	<header>
		<h2>
			<code>grid-auto-flow: row (default)</code>
		</h2>
	</header>
	<figure class="fig">
		<figcaption>Item is anchored on column and row axis</figcaption>
		<div class="grid grid--a">
			<div class="item item--placed"></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>
	</figure>
	<figure class="fig">
		<figcaption>Item is anchored on column axis only</figcaption>
		<div class="grid grid--b">
			<div class="item item--placed"></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 item--implicit"></div>
		</div>
	</figure>
	
	<figure class="fig">
		<figcaption>Item is anchored on row axis only</figcaption>
		<div class="grid grid--c">
			<div class="item item--placed"></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>
	</figure>
</section>

<section class="column">
	<header>
		<h2>
			<code>grid-auto-flow: column</code>
		</h2>
	</header>
	<figure class="fig">
		<figcaption>Item is anchored on column and row axis</figcaption>
		<div class="grid grid--a">
			<div class="item item--placed"></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>
	</figure>
	<figure class="fig">
		<figcaption>Item is anchored on column axis only</figcaption>
		<div class="grid grid--b">
			<div class="item item--placed"></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>
	</figure>
	
	<figure class="fig">
		<figcaption>Item is anchored on row axis only</figcaption>
		<div class="grid grid--c">
			<div class="item item--placed"></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 item--implicit"></div>
		</div>
	</figure>
</section>

* {
	box-sizing: border-box;
}

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

figure {
	margin: 0;
}

figcaption {
	margin: 0 0 20px 0;
}

:root {
	--columns: 1;
}

section {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr);
	gap: 10px 30px;
	max-width: 1400px;
	margin: 0 0 30px 0;
	
	header {
		grid-column: 1 / -1;
	}
	
	@media (min-width: 900px) {
		--columns: 2;
	}
	
	@media (min-width: 1400px) {
		--columns: 3;
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 120px);
	gap: 20px;
	border: 2px dotted;
	counter-rest: item;
	width: 100%;
}

.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 is anchored on column and row axis
	.item--placed {
		grid-column: 2 / span 2;
		grid-row: 3;
	}
}

.grid--b {
	// Item is anchored on column axis only
	.item--placed {
		grid-column: 2 / span 2;
	}
}

.grid--c {
	// Item is anchored on row axis only
	.item--placed {
		grid-row: 2 / span 2;
	}
}

.column .grid {
	grid-auto-flow: column;
}