如何解决Firefox中CSS Grid与Subgrid布局出现的额外空白问题（跨浏览器兼容）

嘿，我之前也踩过subgrid跨浏览器兼容的坑！你的问题核心在于Firefox和Chrome对subgrid的行轨道计算逻辑存在差异，尤其是当子网格元素数量超过父网格指定的行数时，Firefox会保留额外的空白空间，而Chrome会更紧凑地收缩行高。

先拆解下你的代码问题：

• 父容器.container只定义了2行轨道：grid-template-rows: repeat(2, auto)
• 每个.card用grid-row: span 2占据这2行，同时设置grid-template-rows: subgrid，意味着.card里的4个元素（img、h2、两段文本）要挤在父网格的2行轨道里
• Chrome会自动把这些元素紧凑分配到2行中，而Firefox会为父网格的2行轨道预留多余空间，导致出现你看到的空白

下面给你两个不需要浏览器嗅探的纯CSS解决方案，都是开发者常用的跨浏览器兼容方案：

方案1：放弃subgrid，让.card独立定义网格（最稳妥，全浏览器兼容） #

这是我最推荐的方案，毕竟subgrid的细节兼容性目前还存在差异。我们让每个.card自己成为独立的网格容器，完全掌控内部布局：

修改.card的CSS代码：

.card {
  display: grid;
  grid-template-columns: 1fr; /* 单列布局，适配父容器的跨2列宽度 */
  grid-template-rows: auto auto 1fr auto; /* 对应img、标题、文本、按钮四个区域，文本区域自动填充剩余空间 */
  grid-column: span 2;
  grid-row: span 2;
  gap: 1rem;
}

这样修改后，每个卡片的布局完全独立，Chrome和Firefox的渲染会完全一致，还能避免subgrid带来的潜在兼容问题。

方案2：调整父网格与subgrid的轨道对应关系（保留subgrid用法） #

如果你一定要保留subgrid的使用，那需要让父网格的行轨道数量和.card内的元素数量匹配，这样Firefox就能正确计算空间：

1. 先修改父容器的行轨道设置：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto); /* 改成4行，对应每个card里的4个元素 */
  margin-top: 2rem;
}

2. 再调整.card的行跨度：

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-column: span 2;
  grid-row: span 4; /* 跨4行，和父网格的4行轨道对应 */
  gap: 1rem;
}

这样调整后，.card的subgrid行轨道刚好能容纳4个内部元素，Firefox和Chrome的渲染就会统一了。

最后给你一个用方案1优化后的完整可运行代码，确保跨浏览器表现一致：

<!DOCTYPE html>
<html>
<head>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: "IBM Plex Sans"; line-height: 1.33; padding-top: 2rem; padding-left: 1rem; padding-right: 1rem; }
    img { display: block; max-width: 100%; height: auto; border-radius: 5px; }
    .container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); margin-top: 2rem; gap: 1rem; }
    .card { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; grid-column: span 2; grid-row: span 2; gap: 1rem; }
    .button { display: inline-block; padding: 0.5rem 1rem; background: #007bff; color: white; text-decoration: none; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="container">
    <article class="card">
      <img src="https://placehold.co/800x800" />
      <h2>Veniam voluptate ad consequat</h2>
      <p class="text">Fugiat officia sit exercitation nostrud commodo dolore quis ut nostrud non sed cupidatat ea veniam deserunt nulla aliqua eu esse</p>
      <p class="link"><a href="#0" class="button">Duis do amet</a></p>
    </article>
    <article class="card">
      <img src="https://placehold.co/800x800" />
      <h2>Ipsum adipiscing minim velit nulla culpa elit velit</h2>
      <p class="text">Adipiscing eiusmod ipsum excepteur commodo veniam dolore proident ex consequat eiusmod ea aliquip proident nulla ipsum amet consectetur lorem consequat exercitation cupidatat excepteur anim consectetur laboris eiusmod qui eiusmod sunt duis laboris culpa minim ex nostrud do nostrud pariatur excepteur</p>
      <p class="link"><a href="#0" class="button">Veniam ea ea sint</a></p>
    </article>
    <article class="card">
      <img src="https://placehold.co/800x800" />
      <h2>Excepteur occaecat eiusmod</h2>
      <p class="text">Mollit proident do dolore cupidatat fugiat minim do ad occaecat ad occaecat consectetur excepteur commodo nostrud ad incididunt consequat eu excepteur proident officia est consequat velit nostrud laboris minim sunt esse pariatur labore non reprehenderit magna sint et laboris laboris minim nostrud lorem elit anim commodo aute proident est anim velit est consequat ad velit do do exercitation proident culpa commodo pariatur qui cupidatat est duis qui elit eu minim id ex cupidatat est ex cupidatat cillum ad et aliqua</p>
      <p class="link"><a href="#0" class="button">Adipiscing culpa</a></p>
    </article>
    <article class="card">
      <img src="https://placehold.co/800x800" />
      <h2>Enim aliqua quis eu mollit nulla</h2>
      <p class="text">Duis aliqua nulla reprehenderit lorem cillum pariatur ad sit qui sint laboris enim ipsum tempor irure quis nisi elit tempor officia nisi irure officia incididunt occaecat reprehenderit nostrud fugiat eu</p>
      <p class="link"><a href="#0" class="button">Laboris aliquip ipsum</a></p>
    </article>
  </div>
</body>
</html>

内容来源于stack exchange