CSS网格布局方格单元格

Question

我想要创建一个类似仪表盘的视图，其中使用CSS Grid-Layout作为基础。我希望在整个屏幕的长度上分布16列（应该是响应式的）。然后，单元格的高度应该由单元格的宽度决定，以使单元格成为正方形。问题是，我希望某些单元格跨越多个单元格。例如，我想要一个占用2x1个单元格的元素。

所以我有基本的网格布局：

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

还有一些类用于跨越多个列或行的元素：

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

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

现在，我尝试使用元素的宽高比。这对于2x1的元素来说效果很好，但是如果我想要一个2x2的元素，我不能仅仅在相应的类中定义宽高比，我需要为这种情况定义一个单独的类。

有没有一种方法可以使网格单元格成为正方形而不使用aspect-ratio？

Answer 1

这个正方形的aspect-ratio实际上是1x1，然后CSS根据height或width设置它的大小