是否存在类似CSS repeat但逐项循环生成指定项数的函数？

目前原生CSS里没有你描述的这种直接函数——也就是能循环序列内的单个元素，生成总计x个项的功能。

现有方案的局限 #

你提到的repeat()函数是重复整个序列，没法单独循环元素并截断到指定数量。而repeat(0)的异常表现、尚未稳定的if()函数确实都没法可靠解决这个问题。

针对你的Grid行高场景的替代方案 #

你的需求是让每第10行更高，其实不需要这种自定义函数，可以用以下两种更可靠的方式实现：

• 利用grid-auto-rows和:nth-child伪类
  先设置默认行高，再通过子元素的伪类控制对应行的高度：

  .grid-container {
    display: grid;
    grid-template-columns: ...; /* 你的列设置 */
    grid-auto-rows: 40px; /* 默认行高 */
  }
  /* 每第10个网格项所在的行变高 */
  .grid-container > :nth-child(10n) {
    grid-row: span 1; /* 确保占一行 */
    height: 80px; /* 自定义高行高度 */
  }
  

• 组合repeat()手动拼接序列
  如果一定要用grid-template-rows定义，比如你需要生成包含多个高行的行序列，可以手动计算重复次数和剩余项：
  比如要生成28行（2个完整的10项循环+8个剩余项），其中每第10项是高行：

  .grid-container {
    grid-template-rows: 
      repeat(2, repeat(9, 40px) 80px) /* 2个完整的9个普通行+1个高行 */
      repeat(8, 40px); /* 剩余8个普通行 */
  }
  

总结 #

原生CSS暂时没有你想要的那种逐个循环元素生成指定数量项的函数，但针对你的具体Grid行高需求，用伪类或者手动拼接repeat()的方式就能解决，比依赖尚未稳定的新特性更可靠。

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