CSS Grid布局设置resize:horizontal后其余网格列未自适应调整问题

DevOps 小满

2026-10-16

问题原因

出现该问题的核心原因有两点：

Grid的列轨道尺寸由grid-template-columns预先定义，你给第一列设置的minmax(100px, 200px)限制了轨道最大宽度只能到200px，拖拽left-box改变的是元素自身宽度，不会主动修改网格轨道的预设尺寸
固定的轨道尺寸规则下，右侧1fr宽度是基于总宽度减去左侧轨道宽度计算的，左侧轨道不变，右侧自然不会同步调整

解决方案（纯CSS实现，无需JS）

只需要修改.main的grid-template-columns配置，同时把原有的宽度限制移到.left-box上即可：

html,
body,
.main {
  height: 100%;
  margin: 0;
}

.main {
  display: grid;
  /* 把第一列改为auto，让轨道宽度适配子元素的实际宽度 */
  grid-template-columns: auto 1fr;
  grid-template-rows: 50px 1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas: "header-box header-box" "left-box main-box";
}

.header-box {
  background-color: lightblue;
  grid-area: header-box;
  overflow: hidden;
}

.left-box {
  background-color: lightgreen;
  grid-area: left-box;
  resize: horizontal;
  overflow: auto;
  /* 把原来的minmax限制挪到这里，控制拖拽的最小/最大宽度 */
  min-width: 100px;
  max-width: 200px; /* 如果不需要最大宽度限制可以直接删掉这行 */
}

.main-box {
  background-color: lightpink;
  grid-area: main-box;
  overflow: auto;
}

修改后拖拽左侧栏时，网格第一列轨道会跟随left-box的实际宽度自动调整，右侧main-box作为1fr列会自动填充剩余宽度，完全符合预期效果。