<div class="grid">
	<div class="grid__item grid__item--lg">
		<h1>Aspect ratio grid</h1>
		<p>I noticed that using the CSS aspect ratio hack was causing issues with CSS Grid (when I needed all grid cells to be a 1:1 aspect ratio but some grid children to span more than one cell) so this is a solution with CSS Variables and a sprinkling of calc() instead. It does rely on knowing the outer width of the wrapper though (doesn’t work as a percentage value).</p>
		<p>If you change the wrapper and / or gutter variables you’ll see the blocks still maintain theor aspect ratio <em>except</em> where the content in longer than the block, then they grow to fit.</p>
		<p>Some other solutions <a href="https://css-tricks.com/aspect-ratios-grid-items/" target="_blank">here</a> by Chris Coyier.</p>
	<div class="grid__item grid__item--sm">2</div>
	<div class="grid__item grid__item--sm">3</div>
	<div class="grid__item grid__item--db">4</div>
	<div class="grid__item grid__item--lg grid__item--right">5</div>
	<div class="grid__item grid__item--sm">6</div>
	<div class="grid__item grid__item--db">7</div>
	<div class="grid__item grid__item--sm">8</div>
* {
	box-sizing: border-box;

p {
	font-size: 1.4rem;
	line-height: 1.3;

a {
	color: darken(rebeccaPurple, 20%);
	&:focus {
		color: black;

:root {
	--wrapper: 100vw;
	--gutter: 10px;
	--rh: calc((var(--wrapper) - (3 * var(--gutter))) / 4);
	// We could also put the number of columns in a variable, but avoiding that here for the sake of keeping the calc() function simple

.grid {
	max-width: var(--wrapper);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	grid-auto-rows: minmax(var(--rh), auto); // If the content is taller then the box will grow to fit. This is only going to work if the column value is 1fr
	grid-gap: var(--gutter);

.grid__item {
	background-color: hotPink;
	padding: 20px;

.grid__item--lg {
	grid-column: span 2;
	grid-row: span 2;
	background-color: rebeccaPurple;

.grid__item--right {
	grid-column-end: 5;

.grid__item--db {
	grid-column: span 2;
	background-color: goldenRod;
View Compiled