如何在CSS Grid中实现按子元素数量动态适配列空间

需要创建A、B、C三个父容器，每个父容器内包含一个Grid子容器。从服务器获取的A1、B1等元素需分别放入对应父容器的列中；当某父容器内子元素超过3个时，需自动新增列，同时父容器宽度适配列数变化。

尝试的代码 #

CSS #

.children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

HTML #

<div class="parent">
  <div>
    <span style="background: orange;">A</span>
    <div class="children">
      <div>A1</div>
      <div>A2</div>
      <div>A3</div>
    </div>
  </div>
  <div>
    <span style="background: red;">B</span>
    <div class="children">
      <div>B1</div>
      <div>B2</div>
      <div>B3</div>
    </div>
  </div>
  <div>
    <span style="background: green;">C</span>
    <div class="children">
      <div>C1</div>
      <div>C2</div>
      <div>C3</div>
    </div>
  </div>
</div>

当前问题 #

现有代码中Grid子容器固定为2列，无法根据子元素数量动态调整列数，且外层父容器未做横向排列适配，无法实现子元素超过3个时自动扩列、父容器宽度自适应的效果。

步骤1：调整外层容器布局 #

让A、B、C三个容器横向排列，通过Flex布局实现宽度自适应：

.parent {
  display: flex;
  gap: 1.5rem; /* 容器间的间距 */
  align-items: flex-start; /* 顶部对齐 */
  padding: 1rem;
}

步骤2：设置Grid子容器的动态列规则 #

通过固定行数+自动列流的方式，实现超过3个元素自动新增列，同时父容器宽度随列数自适应：

.children {
  display: grid;
  grid-template-rows: repeat(3, auto); /* 每列最多容纳3个元素 */
  grid-auto-flow: column; /* 元素超过3个时自动新增列 */
  gap: 0.5rem; /* 子元素间的间距 */
  margin-top: 0.8rem;
}

完整代码示例 #

HTML

<div class="parent">
  <div class="section">
    <span style="background: orange; padding: 0.3rem 1rem;">A</span>
    <div class="children">
      <div>A1</div>
      <div>A2</div>
      <div>A3</div>
      <div>A4</div> <!-- 新增元素测试 -->
    </div>
  </div>
  <div class="section">
    <span style="background: red; padding: 0.3rem 1rem;">B</span>
    <div class="children">
      <div>B1</div>
      <div>B2</div>
      <div>B3</div>
    </div>
  </div>
  <div class="section">
    <span style="background: green; padding: 0.3rem 1rem;">C</span>
    <div class="children">
      <div>C1</div>
      <div>C2</div>
      <div>C3</div>
      <div>C4</div>
      <div>C5</div>
      <div>C6</div>
      <div>C7</div> <!-- 多元素测试 -->
    </div>
  </div>
</div>

CSS

.parent {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1rem;
}

.section {
  border: 1px solid #eee;
  padding: 0.8rem;
  border-radius: 4px;
}

.children {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.children > div {
  padding: 0.5rem;
  background: #f5f5f5;
  border-radius: 3px;
}

效果说明 #

• 子元素数量≤3时，Grid子容器仅显示1列，对应父容器保持窄宽度（如B容器）
• 子元素数量为4-6时，自动新增为2列，父容器宽度随之扩展（如A容器）
• 子元素数量≥7时，继续新增列（如C容器显示3列），父容器宽度自动适配列数变化

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