CSS Grid动态行与可调宽度布局问题及优化咨询

核心问题修复 #

1. 解决首次添加单元格时容器宽度突变的问题 #

首次点击添加单元格时容器宽度变大，源于grid-auto-columns默认值为auto，单元格内容会撑开网格列宽，同时flex子项缺少明确的宽度基准。修复方式：

• 给列容器添加grid-template-columns: 1fr，让网格列自动占满容器可用宽度，避免内容撑开容器
• 通过flex-basis给列容器设置初始宽度基准，配合flex-shrink:1确保容器可灵活收缩/扩展

2. 解决列宽无法调整至小于50%的问题 #

原代码中单独设置flex-grow:1会让两个列容器强制平分父容器宽度，无法收缩到更小比例。修复方式：

• 使用flex: 1 1 50%替代单独的flex-grow:1，其中：
  • flex-grow:1：允许容器在有剩余空间时扩展
  • flex-shrink:1：允许容器在空间不足时收缩
  • flex-basis:50%：设置初始宽度为父容器的50%
• 添加min-width: 100px（可按需调整），定义容器的最小可调整宽度，确保能收缩到50%以下

CSS代码精简建议 #

将两个列容器的重复样式提取为通用类.column-container，仅保留各自独特的边框颜色在ID选择器中，大幅减少代码冗余。

完整修改后的代码 #

JavaScript（无修改） #

function addCell(color) {
  let container = document.getElementById(color + "-container");
  
  let cell = document.createElement("div");
  cell.innerText = color;
  container.appendChild(cell).className = "container-item";
}

CSS #

#container {
  border: 1px solid #ddd;
  display: flex;
  flex-direction: row;
  height: 50vh;
  resize: vertical;
  overflow: auto;
}

/* 通用列容器样式，精简重复代码 */
.column-container {
  flex: 1 1 50%; /* 核心修复：允许收缩/扩展，初始宽度50% */
  display: grid;
  grid-template-columns: 1fr; /* 修复单元格撑开容器问题 */
  grid-auto-flow: row;
  margin: 10px;
  resize: horizontal;
  overflow: auto;
  min-width: 100px; /* 允许收缩到小于50%的最小宽度 */
}

#red-container {
  border: 1px solid red;
}

#green-container {
  border: 1px solid green;
}

.container-item {
  padding: 10px;
  border: 1px solid black;
}

HTML（仅修改列容器的类名） #

<button onclick="addCell('red')">add red cell</button>
<button onclick="addCell('green')">add green cell</button>

<div id="container">
  <div id="red-container" class="column-container"></div>
  <div id="green-container" class="column-container"></div>
</div>

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