[译] CSS 网格布局术语及解释

原文：bitsofco.de/css-grid-te…

在 CSS Grid Layout Specification，网格是被这么定义的-

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed

网格是一个纵横网格线的集合，这些线将网格容器的空间切分为不同的网格区域，这些区域可被用来放置网格项（作为网格容器的内容）。

额...纳尼？🤔

CSS网格布局介绍了很多新的概念；有17种新的特性需要学习，而且有更多的术语需要理解。这会让学习初期变得比较难，往往一个新术语和其它的术语又有关联，这样你会把自己绕晕。所以，这里是一些关于CSS网格布局基本概念和术语的解释。

网格容器（Grid Container）和网格项（Grid Items）

一个网格是从网格容器(grid container)开始的。字如其名，就是指包含着网格元素的元素。一个网格容器可以通过以下的任何一个CSS值创建：

.grid-container {
    display: grid; /* Will create a block-level grid container */
    display: inline-grid; /* Will create an inline-level grid container */
    display: subgrid; /* Used on grid items that are also grid containers */
}

网格容器可以被想象成 Flexible Box Layout Module 中的flex容器 (通过display: flex或display: inline-flex来创建)，或者一个基本的Tabel(通过display: table或者display: inline-table来创建)。

一个网格容器为它的子元素开启了一个新的网格格式化上下文，子元素现在指网格元素。特殊的规则将会作用到网格元素上，比如：

• 浮动和清除属性不会作用到网格元素上
• vertical-align属性不影响网格元素
• ::first-line 和 ::first-letter 伪元素将不会出现在网格容器上

网格线（Grid Lines）

网格线（Grid Lines） 是切分网格的那些横线和竖线。每条线都有一个参考数字， 从最靠近网格容器外边缘的地方开始。

当在容器中放置网格项的时候，网格线的编号会被用到。我们能够指定某个网格项被放置到特定的网格线处，或者横跨两条线。

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.grid-item {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

网格线也能够被给定的名字来标记。下面的例子将会利用命名的网格线来实现相同的效果。

.grid-container {
    display: grid;
    grid-template-columns: 100px [grid-item-start] 100px [grid-item-end] 100px;
    grid-template-rows: [grid-item-start] 100px 100px [grid-item-end] 100px;
}
.grid-item {
    grid-column: grid-item-start / grid-item-end;
    grid-row-start: grid-item-start;
    grid-row-end: grid-item-end;
}

网格列，行，路径（Grid Columns, Grid Rows, and Grid Tracks）

网格列指的是两个相邻垂直线的空间。列的尺寸由grid-template-columns属性来决定。另一个方面，网格行 是两个相邻平行线之间的空间。它的尺寸由grid-template-rows属性决定。

.grid-container {
    display: grid;
    grid-template-columns: 65px 1fr 65px;
    grid-template-rows: 100px 100px 100px;
}

网格路径是行和列的通称。

网格块（Grid Cells）

网格块（Grid Cells）是指行和列交叉的地方。这块区域被4条网格线界定，它是网格中最小的可用空间了。

网格区（Grid Areas）

网格区（Grid Area） 是指网格中被4根网格线界定的任意区域。它必须包含至少一个，但也可以更多个相邻的网格块。这意味着所有的网格块其实也是网格区。

我们可以让一个元素成为网格区，通过使用grid-area属性，并且通过使用grid-template-areas属性（或普通写法的grid-template-columns或or grid-template-rows属性）将该区域分配到网格的空间上。

比如去定义一个元素，.outlined，到上面的紫色空间上，我们可以这么做-

.outlined {
    grid-area: outlined;
    border: 2px solid purple;
}

.grid-container {
    display: grid;
    grid-template-areas: "outlined outlined ."
                         "outlined outlined ."
                         ". . .";
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

网格

网格本身是上述这些部分的合集，重新看下开头对网格的定义：

The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed

希望经过一番解释，你再看这份定义时能更加清楚了点！