如何使CSS Grid中的单个元素不决定网格内其他元素的尺寸？

嘿，咱们先把问题理清楚：CSS Grid的轨道（行/列）默认会被网格项的内容“撑开”——如果某个元素的内容特别大，它会把整个轨道的尺寸拉宽或拉高，导致其他元素也跟着受影响。要让特定元素不干扰整个网格的尺寸，这里有几个实用的方法：

1. 用minmax(0, 1fr)替换单纯的1fr（最推荐） #

你现在的表单网格用了repeat(10,1fr) / repeat(4, 1fr)，但你知道吗？1fr其实等价于minmax(auto, 1fr)——当元素内容超出轨道的默认尺寸时，它会优先满足内容的需求，把轨道撑大。

换成minmax(0, 1fr)后，轨道会优先按照容器的可用空间分配尺寸，超出的内容会被限制在轨道内（不会撑开轨道）。修改你的表单网格代码如下：

form {
  display: grid;
  /* 将1fr替换为minmax(0, 1fr)，强制轨道按容器尺寸分配 */
  grid-template: repeat(10, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
  padding: .5em;
  min-height: 0;
  min-width: 0;
}

2. 给单个“捣蛋”元素设置overflow属性 #

如果只是某一个网格项（不是整个网格）导致轨道尺寸异常，那可以单独给这个元素设置overflow属性，让它的内容超出时被隐藏或滚动，不会撑开轨道。

比如你的表单里有个内容特别长的输入框或文本域：

/* 假设这个元素是你不想让它影响网格的那个 */
form .problematic-element {
  overflow: hidden; /* 超出部分直接隐藏 */
  /* 如果需要查看超出内容，可以用 overflow: auto; 会自动出现滚动条 */
}

3. 用grid-auto-*控制动态轨道（针对动态生成的网格项） #

如果你的网格项是动态生成的（比如通过JS添加），还可以通过grid-auto-columns和grid-auto-rows强制自动轨道的尺寸，避免被内容撑开：

form {
  display: grid;
  grid-template: repeat(10,1fr) / repeat(4, 1fr);
  /* 强制自动列/行按minmax(0,1fr)分配尺寸 */
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  padding: .5em;
  min-height: 0;
  min-width: 0;
}

额外提示：主网格的适配 #

你的主网格.my-grid用了grid-template-areas布局，如果里面某个区域（比如sch或ct）的内容也会撑开主网格的轨道，同样可以给对应区域的容器添加min-width: 0或overflow属性，防止它影响整个主布局：

/* 比如sch区域内容太宽，影响主网格的列 */
.sch {
  min-width: 0;
  overflow: hidden;
}

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