CSS Subgrid单元格对齐问题求助：嵌套行元素无法对齐

问题根源在于当前结构中，.content是独立的网格容器，内部的img、.name、.description仅受自身内容影响，无法跨卡片共享网格线实现对齐。要让所有卡片的红色.name和蓝色.description块统一对齐，需通过多层Subgrid继承最外层网格的行结构：

核心CSS修改 #

1. 调整.card的行跨度，使其能容纳header、content内部三元素、footer共5行，并保持Subgrid继承：

.card {
  display: grid;
  gap: 10px;
  grid-template-rows: subgrid;
  grid-row: span 5; /* 对应header + img + name + description + footer */
}

2. 让.content也使用Subgrid，继承.card的行结构，并占据其中3行容纳内部元素：

.content {
  background-color: grey;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 占据.card的第2-4行，对应img、name、description */
}

3. 简化.cards的间距写法（符合现代CSS规范）：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 替代grid-row-gap和grid-column-gap */
}

完整代码示例 #

CSS

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.card {
  display: grid;
  gap: 10px;
  grid-template-rows: subgrid;
  grid-row: span 5;
}

.header {
  background-color: orange;
}

.content {
  background-color: grey;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

.name {
  background-color: tomato;
}

.description {
  background-color: skyblue;
}

.footer {
  background-color: black;
  color: white;
}

HTML

<div class="cards">
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
      <div class="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      <div class="description">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
      <div class="name"></div>
      <div class="description"></div>
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
      <div class="name">Lorem.</div>
      <div class="description">Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex. Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
      <div class="name"></div>
      <div class="description"></div>
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="card">
    <div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="content">
      <img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
      <div class="name"></div>
      <div class="description"></div>
    </div>
    <div class="footer">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

原理说明 #

通过两层Subgrid嵌套实现对齐：

• .card继承.cards的行结构，确保所有卡片的整体行布局对齐
• .content继承.card的行结构，让内部的img、.name、.description分别对应到统一的网格行上，实现跨卡片的元素对齐

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