CSS Grid实现跨列元素与单元格等高的技术问询

我需要构建如下结构的CSS Grid布局（对应表格结构）：

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr><th>A</th><th>1</th><th>2</th><th>3</th></tr>
    </thead>
    <tbody>
      <tr><td></td><td>4</td><td>5</td><td>6</td></tr>
      <tr><td></td><td>7</td><td>8</td><td></td></tr>
    </tbody>
  </table>
</div>

其中A是类表头，数字1-8是API返回的数据。要求：

• “A”必须和数字单元格等高，因此不能用grid-row: 1/-1
• 因为用了AlpineJS的x-for（仅支持单个子元素），不想在每第4个项手动添加空单元格

以下是我的代码示例：

CSS代码 #

body {
  max-width: 1280px;
  margin: 2rem auto;
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F1F1F1;
  border-radius: 0.2rem;
  padding: 2rem 1rem;
}
.card button {
  margin-top: auto;
}
.btn {
  cursor: pointer;
  font-size: 1rem;
  border: none;
  padding: 0.5rem 2rem;
}
.btn:hover {
  opacity: 0.8;
}
.btn-primary {
  background: #6944CE;
  color: white;
  border-radius: 1rem;
}
.info {
  border-radius: 0.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.info p {
  margin: auto;
}
.info-footer {
  margin-top: auto;
  background: #6944CE;
  color: white;
  padding: 1rem;
  text-align: center;
}

HTML代码 #

<div class="tier-grid">
  <div class="card">
    <h1>Tier 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore veritatis, excepturi, laudantium optio,molestiae quo cumque illo harum laborum dignissimos nisi ut et modi dolor minus ex dolores voluptate. Unde.</p>
    <button class="btn btn-primary">Learn More</button>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <p>I want this to be an empty cell.</p>
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <p>I want this to be an empty cell.</p>
    <span class="info-footer">Buy Now</span>
  </div>
  <div class="info">
    <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
    <span class="info-footer">Buy Now</span>
  </div>
</div>

解决方案 #

1. 实现表头与单元格等高

把表头拆成和数据行数一致的多个单元格，每个单元格固定在第一列，通过样式视觉合并成整体，自动匹配对应行的高度：

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
/* 表头单元格样式，模拟合并效果 */
.header-cell {
  grid-column: 1;
  background-color: #F1F1F1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  border-bottom: 1px solid #fff;
}
.header-cell:first-child {
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}
.header-cell:last-child {
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
  border-bottom: none;
}

结合AlpineJS的实现：

<div class="tier-grid" x-data="{ rowCount: 3, data: [1,2,3,null,4,5,6,null,7,8] }">
  <!-- 生成对应行数的表头单元格 -->
  <template x-for="i in rowCount" :key="i">
    <div class="header-cell">A</div>
  </template>
  <!-- 遍历数据，自动处理空值 -->
  <template x-for="(item, idx) in data" :key="idx">
    <div class="info" x-show="item">
      <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
      <span class="info-footer">Buy Now</span>
    </div>
    <div class="info" x-show="!item" style="visibility: hidden; opacity: 0;"></div>
  </template>
</div>

2. 自动处理空单元格，无需手动插入

启用grid-auto-flow: dense让Grid自动填充空白位置，结合x-if控制单元格显示，符合x-for单元素限制：

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  grid-auto-flow: dense; /* 自动填充空白单元格 */
}
.empty-cell {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

对应的AlpineJS结构：

<div class="tier-grid" x-data="{ rowCount: 3, data: [1,2,3,null,4,5,6,null,7,8] }">
  <template x-for="i in rowCount" :key="i">
    <div class="header-cell">A</div>
  </template>
  <template x-for="(item, idx) in data" :key="idx">
    <div x-if="item" class="info">
      <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
      <span class="info-footer">Buy Now</span>
    </div>
    <div x-if="!item" class="info empty-cell"></div>
  </template>
</div>

核心说明

• 拆分表头为多行单元格，完美匹配对应行数据的高度，规避了跨行布局的高度问题
• grid-auto-flow: dense自动排布单元格，无需手动计算空单元格插入位置
• 利用AlpineJS的条件渲染，在x-for内通过单个template处理两种单元格类型，符合语法限制

内容的提问来源于stack exchange，提问作者Myat Min Soe