CSS Grid Layout Square Cells

Question

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.

So I have a basic grid layout:

.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;
}

There are also classes for elements that span multiple columns or rows:

.width-unit-2 {
    grid-column-end: span 2;
}

.height-unit-2 {
    grid-row-end: span 2;
}

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.

Is there a way to make grid cells square without using aspect-ratio?

Answer 1

The aspect-ratio of this square is actually 1x1, and then CSS sets its size## based on height or width #