它如何设置网格模板列：[outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end]？

【问题标题】：How its set with grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end]?它如何设置网格模板列：[outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end]？
【发布时间】：2019-03-27 12:12:58
【问题描述】：

我有这段代码来自 CSS 网格的代码 sn-p，发现它真的很混乱。

grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end];

我的疑问是，这里会有 3 列还是 4 列？

【问题讨论】：

有 3 列（这命名网格线） - 请参阅 w3.org/TR/css-grid-1/#named-lines
那为什么 4 个列名分别为：outer-start、center-start、center-end、outer-end？
它们不是列名，它们是网格线名...如果有 3 列，则有 4 条网格线

标签： html css css-grid subgrid

【解决方案1】：

将有 3 列和 4 列网格线。在明确的列号和大小方面

grid-template-columns: [outer-start] 1fr [center-start] 1fr [center-end] 1fr [outer-end];

等价于

grid-template-columns: 1fr 1fr 1fr;

[ 和] 里面的东西是gird line names。我建议您阅读this MDN article 以获得详尽的解释。这些网格线名称随后可用于定位网格项，例如

.grid-item1 {
  grid-column-start: center-start;
  grid-column-end: outer-end;
}

【讨论】：