CSS中repeat()函数是否兼容grid与grid-template属性？

这是CSS Grid规范明确规定的语法限制，不是浏览器实现bug：

• 当在grid或grid-template简写属性中使用字符串语法定义命名网格区域（即示例里"header header"这类写法）时，斜杠/后分隔的轨道列表仅支持显式枚举的轨道值，不允许直接调用repeat()函数。
• 示例中1fr 1fr属于直接枚举的固定轨道值，符合简写语法规则，所以能正常生效；repeat(2, 1fr)虽然语义和前者完全等价，但属于函数调用形式，不符合简写的语法要求，会被浏览器判定为无效属性值直接忽略。
• 这个限制只针对grid/grid-template简写本身，repeat()和命名网格区域不存在兼容冲突，只要不把二者放在同一条简写声明里就能正常工作。

失效写法 #

.body {
  display: flex;
  height: 200px;
  width: 200px;
  gap: 2rem;
}

.container {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  /* 同一条简写里同时出现命名区域字符串和repeat()，触发语法错误 */
  grid: "header header" 2fr "aside main" 7fr "footer footer" 1fr / repeat(2, 1fr);
}

.header {
  grid-area: header;
  background-color: red;
}

.main {
  grid-area: main;
  background-color: blue;
}

.aside {
  grid-area: aside;
  background-color: green;
}

.footer {
  grid-area: footer;
  background-color: black;
}

<div class="body">
  <div class="container">
    <div class="header"></div>
    <div class="main"></div>
    <div class="aside"></div>
    <div class="footer"></div>
  </div>
</div>

两种写法都可以实现预期效果，根据场景选择即可：

• 列数较多需要用repeat()简化代码时，把列轨道声明从简写里拆分出来，单独用grid-template-columns定义：

.container {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  /* 简写中仅保留命名区域和行轨道定义 */
  grid-template: 
    "header header" 2fr 
    "aside main" 7fr 
    "footer footer" 1fr;
  /* 列轨道单独声明，可正常使用repeat() */
  grid-template-columns: repeat(2, 1fr);
}

• 列数较少时，直接在简写里手写枚举轨道值即可，不需要拆分属性，也就是示例中container2的写法：

.container2 {
  grid: "header header" 2fr "aside main" 7fr "footer footer" 1fr / 1fr 1fr;
}

两种写法最终渲染效果完全一致。

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