<div class="wrapper">
	<div class="flex">
		<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">
		<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;
}

:root {
	--bg: darkOrchid;
}

body {
	background-color: #212121;
	overflow-x: hidden;
}

.wrapper {
	max-width: 1200px;
	margin: 40px auto;
}

.flex, .grid {
	counter-reset: item;
}

.grid {
	--bg: orange;
}

.item {
	background-color: var(--bg);
	border-radius: 0.25em;
	counter-increment: item;
	padding: 20px;
	
	&::after {
		content: counter(item);
	}
}

/* This statement is needed for the flexbox layout */
.flex {
	display: flex;
	flex-wrap: wrap;
	margin: -10px;
	width: calc(100% + 20px);
}

/* We also need to size the flex items */
.flex .item {
	width: calc((100% / 3) - 20px);
	margin: 0 10px 20px 10px;
}

.grid {
	/* Only these 3 lines needed for the same Grid layout */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	
	margin-top: 50px;
}