创建一个Grid容器

　　创建一个网格的第一步是定义一个网格容器（ a grid container ）。这个网格容器是一个元素，这个元素为其内容定义了一种网格格式的上下文环境（ a grid formatting context ）。

　　在非常基础的层面，grid layout 很容易让人联想到 flexbox。举例来说，一个网格容器（ a grid container ）的子元素将会成为网格项目（ grid items ）。网格容器的子元素的子元素不会成为网格元素（ grid elements ）—— 虽然任何一个网格项目自身可以成为一个网格容器，并让其子元素变成网格项目。

[ The children of those child elements do not become grid elements—although any grid item can itself be made a grid container , and thus have its child elements become grid items to the nested grid. ]
PS：红色标注暂不知道翻译到哪儿。

　　网格有两种类型：regular grids and inline grids（ display: grid and inline-grid  ）。regular grids 产生 block-level box ，inline grids 产生 inline-level box 。两者的不同见下图：

　　　　

　　网格容器不是块级容器（ grid containers are not block containers ），两者之间有很多的区别：

　　首先，浮动的元素入侵不了网格容器，这意味着一个网格（ a grid ）将不会滑到浮动元素的下面，但是块级容器会。看下图的证明：

　　　　

 　　其次，网格容器的外边距不会和它的 descendants 的外边距 collapse。【 For example, the first list item in an ordered list may have a top margin, but this margin will collapse with the list element’s top margin. 】一个网格项目的上边距不会和它的网格容器的上边距相collapse。
　　　　

　　　一些css的属性和特征并不适用于网格容器和网格项目，如：

　　　　　　当你给网格容器添加的是和列相关的属性（如：column-count，columns 等）会被忽略

　　　　　　当你给网格容器添加::first-line 和 ::first-letter 伪元素也会被忽略

　　　　　　在网格项目上添加 float 和 clear 也会被忽略，但添加给网格容器则不会。尽管如此，float将会帮助决定网格容器children的计算后display值，因为网格项目的display值在它们变成网格项目前就已经定下来了。

　　　　　　【 float and clear are effectively ignored for grid items (though not grid containers). Despite this, the float property still helps determine the computed value of the display property for children of a grid container, because the display value of the grid items is resolved before they’re made into grid items. 】

　　　　　　【 The vertical-align property has no effect on grid items, though it may affect  the content inside the grid item. (There are other,  more powerful ways to  align grid items, so don’t worry.) 】

　　　　　　最近，如果声明一个网格容器的dispay值为inline-grid并且这个元素同时也是浮动的或绝对定位的，那么计算后的 display 值为 grid。(thus dropping inline-grid).

　　　　　　一旦你声明了一个网格容器，紧接着就是创建网格的内部结构（ set up the grid within ），在我们创建内部结构前，有必须学习一些术语。