如何使用css网格自动创建具有名称的列

我目前正在使用内置css网格创建我的8列网格，如下所示

.post{
  display: grid;
  grid-template-columns: [col1]1fr [col2]1fr [col3] 1fr [col4] 1fr  [col5] 1fr [col6]1fr [col7] 1fr [col8]1fr [col-end];
  grid-template-rows: [row1-start]1fr [row2-start]1fr [row3-start]1fr[row3-end];
  grid-row-gap: 16px;
}

我想做的是自动创建网格，而不必指定所有列的宽度，因为它们都具有相同的宽度。 我在想我可以这样使用：

grid-template-columns: repeat(8, [col1][col2][col3][col4][col5][col6][col7][col8] 1fr);

---

但它不起作用。如何简化网格的定义

我会使用

网格模板区域来分隔列名，然后设置列宽


.post{
显示：网格；
网格模板区域：
“col1 col2 col3 col4 col5 col6 col7 col8”；
网格模板列：重复（8，1fr）；
}
.post>div{
背景：#ccc；
}

项目
项目
项目
项目
项目
项目
项目
项目