使用CSS Grid的grid-column span时换行列宽不均的解决办法

问题背景 #

我在用CSS Grid实现响应式布局时，写了如下代码：

CSS代码 #

section {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

section article:first-child {
  grid-column: span 2;
}

article img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

HTML代码 #

<section>
  <article>
    <img src="https://unsplash.com/photos/tRmoHmKd60Q/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8NHx8bGVnb3xlbnwwfHx8fDE3NDUzMzIyNDZ8MA&force=true&w=640">
    <h2>A couple of legos that are on a table photo</h2>
  </article>
  <article>
    <img src="https://unsplash.com/photos/Jytx4OCVBoU/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8Nnx8bGVnb3xlbnwwfHx8fDE3NDUzMzIyNDZ8MA&force=true&w=640">
    <h2>A close up of a lego figure on a black background photo</h2>
  </article>
  <article>
    <img src="https://unsplash.com/photos/g6YO_FyafLc/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzF8fGxlZ298ZW58MHx8fHwxNzQ1MzMyNzMxfDA&force=true&w=640">
    <h2>Brown robot toy on white table photo</h2>
  </article>
  <article>
    <img src="https://unsplash.com/photos/hRCH8faulKA/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MzV8fGxlZ298ZW58MHx8fHwxNzQ1MzMyNzMxfDA&force=true&w=640">
    <h2>White and black skeleton figurine on gray rock photo</h2>
  </article>
</section>

原本的布局逻辑是让文章自动伸缩填充行、窄到阈值自动换行，同时让首个article跨两列形成首项加宽的效果。但遇到一个问题：当容器窄到首个article占满整行，且宽度不足以容纳两个最小300px的article时，最后一行的article会被挤压，无法保证换行后所有列宽相等。我不想用固定列宽加媒体查询的生硬方式，想要更灵活的响应式布局。

解决方案 #

这里提供两种无需硬编码断点的实用方案：

方案一：纯CSS动态控制跨列行为 #

核心是用媒体查询判断容器是否能容纳至少2列（含gap宽度），仅满足条件时让首项跨列：

section {
  --min-col-width: 300px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width), 1fr));
}

/* 当容器宽度能放下2列时，首项跨2列 */
@media (min-width: calc(2 * var(--min-col-width) + 10px)) {
  section article:first-child {
    grid-column: span 2;
  }
}

article img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

这种方式逻辑简单，当容器宽度不足时，所有article自动切换为单列，不会出现列宽不一致的问题。

方案二：JS配合Grid自动流实现无断点布局 #

通过JS动态计算当前容器可容纳的列数，让首项仅在列数≥2时跨列，同时用grid-auto-flow: dense填充空白区域：

section {
  --min-col-width: 300px;
  --grid-cols: 1;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
  grid-auto-flow: dense; /* 自动填充网格空白 */
}

section article:first-child {
  grid-column: span min(2, var(--grid-cols));
}

article img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

const updateGridCols = () => {
  const section = document.querySelector('section');
  const colWidth = parseInt(getComputedStyle(section).getPropertyValue('--min-col-width'));
  const gap = parseInt(getComputedStyle(section).gap);
  const cols = Math.floor((section.offsetWidth + gap) / (colWidth + gap));
  section.style.setProperty('--grid-cols', cols);
};

// 初始化+窗口 resize 时更新
updateGridCols();
window.addEventListener('resize', updateGridCols);

该方案无需提前计算断点，完全根据容器宽度动态调整布局，适配性更强。

总结 #

• 方案一纯CSS实现，适合需求简单的场景，代码维护成本低；
• 方案二更灵活，适合复杂的响应式布局需求，无需硬编码媒体查询断点。

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