nick-fewings-9Cdt0dwvb-s-unsplash.jpg
Photo by Nick Fewings on Unsplash
二维空间是一维空间的纵向或者横向叠加。所以上一章用的技术这一章依然有用。
出版界比互联网更早的开始使用网格布局。在这里，有几个关键词：row， column， gutter，unit/module，field，分别代表行，列，行／列之间的间隔，单元，。
但在css 里的grid 系统用了另外几个词：row， column，gutter，cell， area。
明白了grid系统中的要素之后，接下来看下如何设置和使用这些要素。
画格
- grid-template-rows
- grid-template-columns
grid 有横纵区别，横有几行，纵有几列。在设置display为grid 之后，可以通过设定grid-template-rows来设定横，grid-template-columns来设定纵。
可以设置具体的值（e.g.200px），总空间的百分比（e.g.30%），剩余空间的份数（e.g.1fr），minmax（min，max）
占空
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
- 关键词：auto span
在画好格子后，每一个区域（field）占几行几列就可以设定了。画完格子后，会有栅格线，从1开始递增，如果是倒数，则是从-1开始，然后通过设置每个区域开始和结束的栅格线来确定所占空间。
自动放置
除了通过grid-*来指定每个区域所在的空间，grid系统也有自己默认的放置算法。这样就不用对每一个区域都指定。
切换自动放置算法
- grid-auto-flow
- 关键词：row/column dense
放置
- align-items
- align-self
- justify-items
- justify-self
上面四个属性可以控制栅格中每一格内内容的位置, *-items是*-self的批量化设置。
对齐
- align-content
- justify-content
*-content 设置的一行或者一列在container里的放置位置，类似于九宫格每个格子的位置，和上面的不一样，上面是格子里的内容。
空隙
- grid-column-gap
- grid-row-gap
顺序
- order
默认值是0，可以设置为负数，从而重新排序。
区域模版
- grid-template-areas
- grid-area
在设置容器的时候，除了指定纵横布局，也可以提前设置好区域。这样某一个区域可以指定放置位置。
