CSS subgrid导致元素间距不均，Firefox与Chrome表现有差异

你的卡片布局问题主要出在这几个核心点：

• 父容器.wrapper未定义grid-template-rows，subgrid需要依赖父级明确的行轨道才能正常工作，这也是Firefox和Chrome表现不一致的关键原因
• 错误的选择器.wrapper p h2，该选择器只会选中<p>内部的<h2>，根本没清除标题和段落的默认边距
• .wrapper设置了max-height:400px，强制限制容器高度会挤压内容，导致元素间空白不均

CSS #

.wrapper{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-template-rows: repeat(3, auto); /* 定义3行，对应卡片内的图片、标题、段落 */
  gap: 1rem;
  /* 移除max-height，让容器自适应内容高度 */
}
/* 修正选择器，清除标题和段落的默认边距 */
.wrapper h2, .wrapper p {
  margin: 0;
}
.wrapper img {
  max-width: 100%;
  display: block;
}
.box{
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

HTML #

<div class="wrapper">
  <div class="box">
    <img src="https://picsum.photos/600/400?random=1" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=4" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=3" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
  <div class="box">
    <img src="https://picsum.photos/600/400?random=2" />
    <h2>This is Title One</h2>
    <p>This is the short description of the article which will be used for now</p>
  </div>
</div>

• 父容器定义grid-template-rows: repeat(3, auto)后，subgrid才能正确继承行轨道，让所有卡片内的对应元素（图片、标题、段落）对齐到同一高度
• 移除max-height后，容器会根据内容自动调整高度，避免内容被挤压产生不均空白
• 修正选择器清除默认边距后，布局间距会更可控，不会出现额外的留白

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