CSS Grid设置首列最小宽度并让剩余未知数量列平分剩余空间

错误原因 #

• repeat(auto-fill, 1fr) 不符合CSS Grid规范要求：auto-fill/auto-fit 必须搭配带有明确最小宽度的minmax()使用，直接使用相对单位1fr时，浏览器无法计算需要自动生成的列轨道数量，实际只会生成1个1fr的列，剩余子元素会被放入隐式网格中，无法实现平分效果。

正确实现代码 #

header {
  display: grid;
  grid-template-columns: minmax(450px, 1fr) repeat(auto-fit, minmax(0, 1fr));
  gap: 1rem;
}

HTML代码无需修改。

实现逻辑 #

• 第一列配置minmax(450px, 1fr)：保证宽度不会小于450px，整体空间充足时可以按比例参与空间分配。
• 后续列配置repeat(auto-fit, minmax(0, 1fr))：auto-fit会根据实际存在的子元素数量自动生成对应数量的列轨道，每个轨道最小宽度为0、最大为1fr，不管剩余子元素是2、3还是4个，都可以自动平分剩余空间。
• 原属性grid-gap已被W3C规范标记为旧属性，统一使用gap即可，完全向下兼容。

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