[TOC] ## 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`）  ## 越界处理与grid-auto-columns 如果你“画”的元素的长宽超过了你“画”的网格的网格线行数或列数，Grid系统会自动为你补充上。但网格轨道的宽度是否满足你的需求需要你自己去留意。    ## 自动放置与grid-auto-flow 当你既不在一个grid-container中用`grid-template-areas`给一个grid-item设置长宽又不在grid-item内部用`grid-column/row`自己去设置（并且不设置自己的名字），那么，这个grid-item会被当做**一个网格单元格**来绘制，并按照横向或纵向的方式依次放置进闲置的网格空间。  其余值： - column：从上往下放，到底了再从另一列（从左往右）开始再从上往下继续放 - dense T_T没发现和row有什么区别 ## 其它现象 ### grid-item数>grid-cell数 当采用`grid-template-areas`的渲染方式时，多余的item会被截取掉  当采用`grid-auto-flow`自动放置的时候  设置为column的时候  > **注意：** 此时请不要给item取名，因为这样会产生不可控的布局现象 ### 行级元素设置为grid时  我们可以发现当一个行级元素被设置为`display:grid`时，它会独占一行 ### grid-container并不会转换为border-box  ### grid-item会转换为margin-box 对的，你没有看错，是`margin-box`，比`border-box`还牛逼！  ---