5分钟掌握Grid布局【多图示例】

Grid布局一览
网格系统
- 生成网格系统：display:gird
- "画"一个网格出来： grid-template-columns/rows
- 圈地为王（"画"一个元素）：grid-column/row
  - 可视化布局：grid-template-areas
给网格设置gap
富余空间管理
越界处理与grid-auto-columns
自动放置与grid-auto-flow
其它现象
- grid-item数>grid-cell数
- 行级元素设置为grid时

pre-notify

看完不会算我输！ლ(′◉❥◉｀ლ)

Grid布局一览

大概看一下就好，下面我们会从头讲起。

其中内容部分的高度也可以不用calc()计算出的结果来表示而是使用auto，只不过这样的话我们需要将.container容器的height设置为100%。

网格系统

生成网格系统：display:gird

当给一个容器（我们称这样的容器为grid-container）设置为display:gird时其内部的直接子元素都会转换为grid-item。

grid-item类似于将一个元素block化，参考最初的那个栗子中的span元素。如果一个元素已经是block元素并且它自身带有margin等样式，那么这些样式会被保留。

"画"一个网格出来： grid-template-columns/rows

template template template模拟三遍关键字，嗯。。名字真怪

So以上就是一个3x3的网格，它的每个格子都是边长为100px的正方形，嗯，对照右边的代码你应该可以意会到怎么回事。

值得一说的是这个3x3的网格是由4条列网格线和4条行网格线形成的。并且我们能为每条网格线取一个名字

grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4];
grid-template-rows:[r1] 100px [r2] 100px [r3] 100px [r4];

嗯，取名字有什么用呢?莫方!我们马上讲到。

圈地为王（"画"一个元素）：grid-column/row

[warning] 有些姓马的同学看到这一节标题肯定纳闷，哎呀哎呀，这API长得不是和上面那一节的API一样吗？一样个鬼咧，这个一对没有template字样，并且column/row都不带s

我们都知道一个矩形由4条边组成，嗯，记得我们上一节中给每一条网格线取了个名字吗？嘿，是不是突然明白了什么。

注意，grid-column:c1/c3中的/并不是除号，而是表示到/To的意思，它表示你在这张网格里放了一个元素，这个元素的宽度是c1列网格线到c3列网格线之间的距离。

除了上面这种表示一个元素宽高的方式，我们还能直接使用数字

grid-column: 1/3; //第一条网格线到第三条网格线的距离
grid-row:2/3;

可视化布局：grid-template-areas

又或则我们可以把一个元素(grid-item)实际的样式大小交给它的父容器(grid-container)来决定。

不过我们需要先给这个grid-item取个名字

.item1{
  grid-area:item1;
}

接着

注：一个.代表一个空的网格单元，另外grid-tempalte-areas的值只在最后一行有;

嗯，如果这一节的栗子看懂了（怎么能，怎么能！看不懂！），那么最开始的布局的例子想必小伙伴现在也能看懂啦~

至此你已经掌握住了Grid中最重要的部分，其余都是细节都是细节啦（嗯，只说了两遍），是不是很简单~(づ￣ 3￣)づ

给网格设置gap

要声明的一点是，grid-gap的值就像padding什么的一样是一个复合值（padding-left/top），只设置一个是表示横纵向gap值相等。

Grid相较于Flex最大的一点不同之处就在于Grid是一个二维布局系统（Flex是一维的），什么是二维？什么是一维呢？

富余空间管理

和Flex一样分为父容器的富余空间的管理和子item的富余空间的管理。

gird-container富余空间管理API

justify-content
align-content

gird-item富余空间管理API

justify-items
align-items

同样的justify是负责行向富余空间的管理，align是负责纵向的富余空间的管理。

并且不论是justify还是align属性，不论是父容器(grid-container)还是grid-item，它们各自的justify和align属性的值都存在start/end/center/stretch四个选项。

grid-container和grid-item之间唯一需要注意的是，grid-container的justify和align属性还存在3个grid-item元素所不具有的属性值：space-around/space-between/space-evenly

[danger] 注意： justify-content/align-content/justify-items/align-items 都是grid-container下的css属性，虽然justify-items/align-items是针对grid-item的富余空间管理，但请注意，-items是有一个s的，这意味着这个css属性是对所有grid-item生效的，如果你要单独对某个grid-item进行设置，请使用grid-self

另外我们若只在grid-template-columns中设置grid-line，也能达到网格项自适应网格容器的效果（类似于justify-content:stretch,或则使用1fr等分单位）

越界处理与grid-auto-columns

如果你“画”的元素的长宽超过了你“画”的网格的网格线行数或列数，Grid系统会自动为你补充上。但网格轨道的宽度是否满足你的需求需要你自己去留意。

自动放置与grid-auto-flow

当你既不在一个grid-container中用grid-template-areas给一个grid-item设置长宽又不在grid-item内部用grid-column/row自己去设置（并且不设置自己的名字），那么，这个grid-item会被当做一个网格单元格来绘制，并按照横向或纵向的方式依次放置进闲置的网格空间。