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会被当作一个网格单元格来绘制，并按照横向或纵向的方式依次放置进闲置的网格空间。

其他值：

• 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-container虽然会block化，但仅此而已

grid-item会转换为margin-box

对的，你没有看错，是margin-box，比border-box还牛逼！

=== End ===