Html 使用css网格为模式的重复列寻找更简洁的语法？

是否有任何语法可以重复这种精确的网格布局

.grid-system {    
  grid-template-columns: 42px 48px 42px 48px 42px 48px 42px 48px 42px 48px 42px;
}

我试过了，但似乎不起作用：

.grid-system {    
  grid-template-columns: repeat(11, 42px, 48px);
}

这是一支代码笔，包含更多详细信息：

正如您所见，该设计打破了默认网格系统，因此我制作了一个扁平网格（

samba扁平网格

），没有间隙来补偿：

---

这是

网格模板列：重复（1142px 48px）

-它们之间没有空格。检查所有的可能性

请参见下面的演示：

.samba网格{
显示：网格；
网格模板列：重复（12，42px）；
背景：粉红色；
宽度：100%；
柱间距：48px；
}
.samba平面网格{
显示：网格；
网格模板列：重复（1142px 48px）；/*已更改*/
背景：黄色；
宽度：100%；
}
.集装箱{
宽度：100%；
最大宽度：1032px；
保证金：0自动；
背景：绿色；
}
.科{
宽度：100%；
显示：块；
背景：番木瓜；
}
.要素-1{
网格列开始：1；
格构柱端部：跨度6；
}
.要素2{
网格列开始：7；
格构柱端部：跨度6；
}
.元件内部img{
背景：蓝色；
网格列开始：1；
格构柱端部：跨度6；
}
.元件内部img img{
宽度：100%；
}
.元素内部内容{
背景：#b000b5；
网格列开始：7；
网格柱端：12；
}

你好，世界

你好，世界

Doh只是一个打字错误！嘿，没有办法保持原来的网格，让一个元素在排水沟的跨度内，对吗？（无论是否尽快，都将标记为正确）网格项目仅在跨越下一个项目时跨越檐槽；所以答案是否定的