如何实现CSS Grid自适应两列转单列布局（兼容max-content）

方案一：Grid + 容器查询（最适配动态宽度） #

这种方法能精准根据容器宽度切换布局，适配元素尺寸动态变化的场景：

1. 给父容器开启容器查询上下文：

.container {
  container-type: inline-size;
  display: grid;
  gap: 1rem; /* 可按需调整元素间距 */
}

2. 默认采用单列布局（窄屏状态）：

.container {
  grid-template-columns: 1fr;
  grid-template-areas:
    "a"
    "b"
    "c"
    "d";
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

3. 当容器宽度能容纳两列时，切换为双列布局：

/* 宽度阈值可根据实际场景设置，或通过JS动态计算两列总宽度后赋值给CSS变量替换600px */
@container (min-width: 600px) {
  .container {
    grid-template-columns: max-content max-content;
    grid-template-areas:
      "a b"
      "c d";
  }
}

方案二：Flexbox + 媒体查询（兼容性更好） #

如果需要兼容不支持容器查询的浏览器，可采用此方法：

1. 默认单列布局：

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

2. 宽屏时切换双列，通过order调整元素位置：

@media (min-width: 600px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .a, .c {
    flex: 0 0 auto;
    width: max-content;
  }
  .b, .d {
    flex: 0 0 auto;
    width: max-content;
    order: 1; /* 让b、d排在右侧 */
  }
  .c { order: 2; }
  .d { order: 3; }
}

宽屏时a和b会在同一行，c和d在下方同一行；窄屏时自动按a-b-c-d顺序堆叠。

方案三：纯Grid自动适配（无需查询语句） #

不用写媒体/容器查询，让Grid自动判断列数：

.container {
  display: grid;
  gap: 1rem;
  /* 列宽最小为元素最大内容宽度，剩余空间平分，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
}

/* 强制a、b在第一行，c、d在第二行 */
.a, .b { grid-row: 1; }
.c, .d { grid-row: 2; }

这种方式无需手动设置宽度阈值，但元素宽度差异过大时可能出现布局异常，适合元素宽度相近的场景。

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