<p>我想要创建一个类似仪表盘的视图，其中使用CSS Grid-Layout作为基础。我希望在整个屏幕的长度上分布16列（应该是响应式的）。然后，单元格的高度应该由单元格的宽度决定，以使单元格成为正方形。问题是，我希望某些单元格跨越多个单元格。例如，我想要一个占用2x1个单元格的元素。</p> <p>所以我有基本的网格布局：</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>还有一些类用于跨越多个列或行的元素：</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>现在，我尝试使用元素的宽高比。这对于2x1的元素来说效果很好，但是如果我想要一个2x2的元素，我不能仅仅在相应的类中定义宽高比，我需要为这种情况定义一个单独的类。</p> <p>有没有一种方法可以使网格单元格成为正方形而不使用<code>aspect-ratio</code>？</p>