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設定它的大小