grid.html

grid.html

<div class="cards-container">
  <div class="card">
    <div>卡片1-行1内容</div>
    <div>卡片1-行2内容<br>多行文本</div>
    <div>卡片1-行3内容</div>
  </div>
  
  <div class="card">
    <div>卡片2-行1内容</div>
    <div>卡片2-行2内容</div>
    <div>卡片2-行3内容<br>更长的内容</div>
  </div>
  
  <div class="card">
    <div>卡片3-行1内容</div>
    <div>卡片3-行2内容<br>特别高的内容<br>占三行</div>
    <div>卡片3-行3内容</div>
  </div>
</div>

<style>
.cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 15px;
}

.card {
  display: contents; /* 关键属性：使卡片容器不渲染 */
}

.card > div {
  border: 1px solid #e0e0e0;
  padding: 15px;
  border-radius: 8px;
  background: #f9f9f9;
}

/* 创建行分组 */
.card > div:nth-child(1) { grid-row: 1; }
.card > div:nth-child(2) { grid-row: 2; }
.card > div:nth-child(3) { grid-row: 3; }
</style>