<div class="grid">
	<div class="padding"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
	<div class="padding"></div>
</div>
* {
	box-sizing: border-box;
}

$col: calc((1200px - (11 * 10px)) / 12); // ($wrapperWidth - ($numberOfGutters * $gutterWidth)) / $numberOfColumns

.grid {
	display: grid;
	grid-template-columns: 1fr repeat(12, minmax(auto, $col)) 1fr;
	grid-gap: 10px;
}

.column {
	height: 100vh;
	background-color: #8e12cc;
}

.padding {
	height: 100vh;
	background-color: #7cc8d6;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.