grid布局笔记

如今，grid布局已被现代浏览器支持，是时候学一波新姿势了～

基本属性

1
2
3

display: grid | inline-grid | subgrid;
grid-template-columns:
grid-template-rows:

在父元素分别定义了grid容器，行（rows）与列（columns）的大小。
这三个属性的作用，可以想像为在白纸上动手画一个表格，首先确定一块表格区域，然后画行线和列线。
在grid-template-columns和grid-template-rows中，不仅可以定义行线与行线（列线与列线）的间距，还可以为每条线定义一个或多个名字(可以同名)：[line_a] 10px [line_b] 20px [line_c]，这样的形式。从代码层面，是不是就能很形象的看出，这个网格区域，是三条网线（line_a, line_b, line_c）分隔成的，两个可填充网格（一个宽度／高度10px，一个宽度／高度20px）。

fr和repeat

grid布局设计之初就考虑到要声明每个网格的大小是一件繁琐的事情，所以他们提供了两个比较强大的工具–fr和repeat。

fr是个单位，他相对与整个剩余区域，进行均分。可能感觉一头雾水，直接看代码理解好了。
grid-template-columns: 1fr 1fr 1fr 100px;
所谓剩余区域，就是对与整个网格，去掉已经明确大小的区域。所以上面的代码表示，网格第4列宽度是100px，第1～3列每列的宽度是剩下区域的三分之一。
比如网格区域总宽度是700px，那这个网格区域被上面的代码分为四列，分别是200px，200px，200px，100px。
repeat可以认为是个函数，他接受两个参数，第一个参数是重复次数，第二个参数是重复内容。比如上面的代码，用repeat就可以改写成grid-template-columns: repeat(3, 1fr) 100px;

针对每个单元格的属性

1
2
3

grid-column: grid-column-start / grid-column-end
grid-row: grid-row-start / grid-row-end
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end

这里主要是介绍7个属性，其中3个属性是另外4个属性的简写形式，上面的写法可以清楚的看清他们的关系，以及3个简写属性的声明规则。
下面只需要介绍4个基本的属性。显而易见，网格的每个单元格是由4条线围成的，所以他们分别表示单元格开始／结束的行／列线。
这4个基本属性接受的属性值如下：

<number> || <name>可以直接是一个表示栅格线名字或数字
span <number>项目将横跨指定数量栅格轨迹
span <name>项目将横跨至指定名字的栅格线
auto 自动放置，自动跨越轨迹或者默认跨越轨迹

再谈网格区域grid-area

之前提到了grid-area是grid-row-start、grid-column-start、grid-row-end、grid-column-end四个属性的缩写属性，其实grid-area还可以接受一个区域名称来作为属性值。

这样，需要在父级元素中用grid-template-areas属性来定义每个网格区域的名字:

display: grid;
grid-template-columns: 220px 20px 220px 20px 220px;
grid-template-rows: auto;
grid-template-areas: "header header header header"
                     "main main . sidebar"
                     "footer footer footer footer"

相同的名字将会合并网格区域，一个.表示一个空的网格。

值得一提的是，上面的代码用了grid-template-rows: auto;，这样每个网格区域之间垂直的间距就无法通过网格属性进行设置，需要给他们设置margin-bottom来设置垂直间距。如果仍想通过网格属性来设置，需要像下面这样写：

display: grid;
grid-template-columns: 220px 20px 220px 20px 220px;
grid-template-rows: 100px 20px 100px 20px 100px;
grid-template-areas: "header header header header"
                     ". . . ."
                     "main main . sidebar"
                     ". . . ."
                     "footer footer footer footer"

网格间隙属性

1	grid-gap: grid-row-gap grid-column-gap

网格间隙仅仅在行/列之间，不包括最外部的边。

网格项排列属性

1	grid-auto-flow: row \| column \| row dense \| column dense

如果你的栅格项目没有显式地在栅格中设置位置，自动放置算法便会生效。这个属性控制自动放置算法的的运作。

属性值：
row 自动放置算法将按行依次排列，按需添加新行。
column 自动放置算法将按列依次排列，按需添加新列。
dense 如果较小的项目出现靠后时，自动防止算法将尽可能早地填充栅格的空白格子

对齐属性

控制整行／整列每格内容的对齐：align-items / justify-items，属性值：start | end | center | stretch
控制整行／整列在网格容器中位置：align-content / justify-content，属性值：start | end | center | stretch | space-around | space-between | space-evenly
控制每个单元格内容和行轴／列轴对齐（即垂直／水平方向）：align-self / justify-self，属性值：start | end | center | stretch

Contents