如何实现默认2列、窄屏自动合并为1列的CSS Grid布局？

你可以通过两种方式实现这个需求，根据场景选择即可：

方法1：媒体查询（精确控制断点） #

先设置默认的2列布局，再通过媒体查询指定当容器宽度不足时切换为1列：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* 可选，添加子元素间距 */
}

/* 当视口/容器宽度小于600px时，切换为1列 */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

你可以根据实际需求调整max-width的阈值（比如改成500px），确保在容器宽度不足以容纳2列时触发布局切换。

方法2：自动适配布局（无需手动设置断点） #

使用repeat(auto-fit, minmax())语法，让Grid自动根据容器宽度调整列数，无需写媒体查询：

.grid-container {
  display: grid;
  /* 每列最小宽度300px，最大占满可用空间；自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

原理说明：

• minmax(300px, 1fr)定义每列的最小宽度为300px，最大宽度为平分容器的剩余空间
• auto-fit会自动计算容器能容纳多少个符合最小宽度的列，当容器宽度小于300px * 2 = 600px时，就只能放下1列，自动切换为单列布局

你可以根据子元素的实际尺寸调整minmax里的最小宽度值，确保布局符合预期。

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