CSS Grid避免单列换行：实现多列同步换行的方案

解决方案 #

要实现空间不足时至少两列同步换行、避免单列孤立的效果，无需额外媒体查询，只需调整容器的最小宽度并优化grid-template-columns配置：

修改后的完整代码 #

CSS 部分

.tiles-container {
  display: grid;
  grid-gap: 6rem;
  /* 每列最小宽度220px，自动填充列，剩余空间均分 */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* 容器最小宽度：2列最小宽度 + 1个间距，确保不会出现单列布局 */
  min-width: calc(2 * 220px + 6rem);
}

a {
  background: red;
  height: 100px;
}

HTML 部分

<div class="tiles-container">
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</div>

原理解析 #

• min-width的核心作用：通过calc(2 * 220px + 6rem)计算出容器的最小宽度，这个值等于2个列的最小宽度加上它们之间的间距。当容器宽度小于这个值时，Grid会自动切换为2列布局，彻底避免单列单独换行的情况。
• grid-template-columns的优化：使用repeat(auto-fill, minmax(220px, 1fr))，让Grid在空间足够时自动填充更多列，每列最小保持220px，剩余空间平均分配给各列，保证布局的灵活性。

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