如何无需aspect-ratio实现CSS Grid正方形单元格及跨格布局？

核心思路 #

利用CSS的padding-top百分比特性（百分比值基于元素宽度计算），配合Grid的跨行列控制，让单个单元格天然成为正方形，跨格元素自动匹配对应比例，无需为每种跨格情况单独设置aspect-ratio。

具体实现代码 #

1. Grid容器样式

.dashboard-grid {
  display: grid;
  /* 16列响应式布局，列宽均分剩余空间 */
  grid-template-columns: repeat(16, 1fr);
  /* 单元格间距 */
  gap: 1rem;
  /* 响应式容器适配 */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

2. 基础单元格样式（自动实现正方形）

.grid-cell {
  position: relative;
  /* padding-top:100% 让高度等于宽度，直接实现正方形单元格 */
  padding-top: 100%;
}

/* 内容容器：绝对定位填充整个单元格，避免padding影响内容布局 */
.grid-cell__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 跨行列控制类（无需额外设置比例）

/* 跨2列1行 */
.span-2-1 {
  grid-column: span 2;
  grid-row: span 1;
}

/* 跨2列2行 */
.span-2-2 {
  grid-column: span 2;
  grid-row: span 2;
}

/* 跨4列1行 */
.span-4-1 {
  grid-column: span 4;
  grid-row: span 1;
}

/* 跨4列3行 */
.span-4-3 {
  grid-column: span 4;
  grid-row: span 3;
}

4. HTML结构示例

<div class="dashboard-grid">
  <div class="grid-cell">
    <div class="grid-cell__content">1×1</div>
  </div>
  <div class="grid-cell span-2-1">
    <div class="grid-cell__content">2×1</div>
  </div>
  <div class="grid-cell span-2-2">
    <div class="grid-cell__content">2×2</div>
  </div>
  <div class="grid-cell span-4-3">
    <div class="grid-cell__content">4×3</div>
  </div>
  <div class="grid-cell">
    <div class="grid-cell__content">1×1</div>
  </div>
</div>

方案优势 #

• 单个单元格自动保持正方形，无需aspect-ratio
• 跨格元素仅需添加对应的行列跨度类，比例自动匹配（跨n列m行则元素比例为n:m）
• 完全响应式：容器宽度变化时，单元格宽高等比例缩放，保持布局一致性

内容的提问来源于stack exchange，提问作者Smiley444