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

【问题标题】：How to auto create columns with name using css grid如何使用 CSS 网格自动创建具有名称的列
【发布时间】：2018-02-23 13:43:51
【问题描述】：

我目前正在使用这样的内置 css-grid 创建我的 8 col 网格

.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：

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

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

【问题讨论】：

标签： css css-grid

【解决方案1】：

我会使用grid-template-areas 分隔列名，然后设置列宽。

.post {
  display: grid;
  grid-template-areas:
    "col1 col2 col3 col4 col5 col6 col7 col8";
  grid-template-columns: repeat(8, 1fr);
  
}

.post > div {
  background: #ccc; 
}

<div class="post">
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

【讨论】：