为何CSS中grid属性里的repeat()函数无法正常工作？

这问题我之前也踩过坑，核心在于 grid 是复合简写属性，它的解析逻辑和单独的 grid-template-columns 完全不一样！

为什么会出问题？ #

当你直接在 grid 属性里写 repeat(5, 1fr) 时，CSS 会把这个值解析为 grid-template-rows（行模板） 的设置，而 grid-template-columns（列模板）会被重置为初始值 none——这就导致你的网格没有列定义，布局自然就崩了。

而单独用 grid-template-columns: repeat(5, 1fr) 时，你是明确给列模板赋值，行模板保持默认的 auto，所以能正常工作。

正确的写法 #

你有几个选择来解决这个问题：

1. 明确区分行和列模板
   在 grid 属性里用 / 分隔行和列部分，哪怕行用默认的 auto 也要写上，告诉CSS哪部分是列的定义：

   .grid-container {
     grid: auto / repeat(5, 1fr);
   }
   

2. 继续使用单独的列属性
   如果你不需要同时设置行模板，直接用 grid-template-columns 就好，避免简写带来的歧义：

   .grid-container {
     grid-template-columns: repeat(5, 1fr);
   }
   

3. 同时设置行和列（如果需要）
   要是你需要给行也设置规则，就把行的定义写在 / 前面，列的定义在后面：

   .grid-container {
     grid: 80px auto 80px / repeat(5, 1fr);
   }
   

错误写法对比 #

为了更清楚，看看你可能写错的代码对应的解析结果：

/* 你可能的错误写法 */
.grid-container {
  grid: repeat(5, 1fr);
}
/* 等价于下面这段代码，列模板被重置为none */
.grid-container {
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: none;
}

这样一看，就能明白为什么布局会被破坏了吧😉

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