<p>I want to create a dashboard-like view using CSS Grid-Layout as a base. I want 16 columns spread across the entire length of the screen (should be responsive). The height of the cell should then be determined by the width of the cell to make the cell a square. The problem is, I want some cells to span multiple cells. For example, I want an element that takes up 2x1 cells. </p> <p>So I have a basic grid layout: </p> <pre class="brush:php;toolbar:false;">.grid-container { display: grid; grid-template-columns: repeat(16, 1fr); grid-auto-rows: var(--tile-unit); gap: var(--tile-gap); align-content: start; } .grid-item { background: light-gray; border-radius: 10px; }</pre> <p>There are also classes for elements that span multiple columns or rows: </p> <pre class="brush:php;toolbar:false;">.width-unit-2 { grid-column-end: span 2; } .height-unit-2 { grid-row-end: span 2; }</pre> <p>Now I try to use the aspect ratio of the element. This works fine for a 2x1 element, but if I want a 2x2 element I can't just define the aspect ratio in the corresponding class, I need to define a separate class for this case. </p> <p>Is there a way to make grid cells square without using <code>aspect-ratio</code>? </p>