简介

    CSS Grid Layout（下文称 “Grid”）是一个非常强大的双维度布局方式，目的在于消除之前通过tables，floats，positioning和inlne-block这种比较hacks的方法布局。它的语法与flexbox十分相似，但比起flexbox只能确定一个维度的布局方式(纵向，或者横向)，grid可以同时确定横向和纵向的布局。

flexbox只能一个维度的布局 grid 横向和纵向都可以操作

几种术语

    在正式介绍Grid之前，先了解一下里面提到的几种概念。

 Grid Container

      一个即将进行Grid布局的容器，被 display: grid /grid-line 定义的标签，是Grid Items的直接父级，下面的例子中，<div class=" container "> 是一个 grid container。

Grid Item

    是grid container的直接子集，如下图，<div class=" item " >是container的grid items，但是 <p class=" sub-item ">不是

Grid Line

    grid line可以理解为是对grid container进行划分的线，可以横向划分也可以纵向划分，如下图所示，黄色的线是一条grid line：

Grid Track

    由两条相邻的grid line围起来的区域就是grid track，如下图所示，黄色的阴影部分是一个gri track：

Grid Cell

    被grid line切割完后的小区域块，又四条响铃的grid line围成，像表格里的单元格一样，如下图所示，黄色的区域是一个grid cell：

Grid Area

    由四条grid line（不要求相邻）围起来的区域，每个area可以包含1 - n个cell，如下图黄色区域所示：

属性

     Grid与flex一样，属性也分容器（grid container）属性和元素（grid items）属性，在布局时，也需要同时对父元素和子元素进行操作。

item的属性：

Note: float，display：inline-block / table-cell，vertical-align和column-*这些属性对grid item无效。

---

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

    定义一个item（grid area）由哪四条grid line围起来的。值可以是 line的名字，也可以是 编号，或者 auto，auto会自动计算划分的范围。

    如果不设定 grid-column-end / grid-row-end，那么默认向前衍生一个track。同时，多个items可以互相重叠，可以用 z-index 来决定叠加顺序。

    在line名字相同的情况下，我们写line名字的时候除了指定名字,还需要指定是该名称下的第几个line：.item{ grid-column-start: col-start 2;}

grid-column/grid-row:

    grid-column-start，grid-column-end，grid-row-start，grid-row-end的简写模式。值可以是具体的line，也可以是跨越的track的数（span value）。

    grid-column/row : <start-line> / <end-line> | <start-line> / span <value>

grid-area:

    为一个grid area取一个名字，这样可以被 container 属性 grid-template-areas 引用。也可以作为上述四个属性的简写。

    grid-area：name | row-star t/ column-start / row-end /column-end

---

justify-self 与 align-self:

    定义item在一个cell中行 列显示的位置。也可以在 container 属性 justify-items / align-items中被定义。值有：

    start：从cell的开始开始填充

    end：从cell的结束开始填充

    center：在cell的中间

    stretch：缩放item使他填充整个cell，默认属性。

place-self:

    align-self 和 justify-self 的缩写模式

    place -self : <value> 同时被align和justify应用 | <align-self> <justify-self>

---

container的属性：

---

display:

    定义一个Grid Container，建立一个新的 grid formatting context 上下文环境，可以有两种取值：

        grid：定义一个block-level grid 

        inline-grid：定义一个inline-level container

---

grid-template-columns与grid-template-rows：

    grid-template-colunms/rows：[line-one-name1 line-one-name2 ...] size ...

    设置grid line的分隔空间，注意，每条line可以有多个名字。size可以是一个数字长度，也可以是百分数，还可以设置成auto来自动填充大小，多个auto可以通过单位 fr 来按照 分数 比例划分。比如：.container{ grid-template-columns: 1fr 50px 1fr 1fr}，会在container下将50px减去后，在除以三就是每line之间的宽度。比如：

grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; 

grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];

    其中，如果定义的空间都是一样和重复的，可以使用replace()函数来代替繁琐的定义。

    .container{ grid-template-columns: repeat(3, 20px [col-start]);}

    这句话等价于：

    .container{ grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;}，

---

grid-template-areas:

    定义grid container的组织结构，通过使用由 grid-area 属性定义的grid areas，来填充container，值可以是：

    grid-area-name：一个grid-area。

    . ：代表一个空grid cell，可以使用几个连续的 ... 来表示这里有好几个空cell。

     none：grid area没有被定义。

    虽然这个属性不是用来定义line的名字的，但是在将一个已经命名的area放进container后，包裹他的line将自动产生新的名字。比如定义了一个叫 header 的区域，那么包裹他的column-start和row-start将命名为：header-start，column-end和row-end将命名为：header-end。

---

grid-template:

     是 grid-template-rows，grid-template-columns，grid-template-areas 的简写模式，从上到下开始定义，下面两种写法是等价的：

---

grid-column-gap/grid-row-gap：

    设置line的粗细，可以想象是在设置columns/rows的间隔：只是设定行与行，列与列间的间隔，并不会影响边界。

grid-column-gap：<line-size>

grid-gap:

    grid-row-gap 和grid-column-gap 的简写模式。

    grid-gap：<grid-row-gap> <grid-column-gap>

---

justify-items 与 align-items:

    统一指定container下所有items的 justify-self 或 align-self，可以取的值与item的justify-self / align-self 相同，示例如下：

place-items:

    align-items和 justity-items 的简写模式。

    place-items：<align-items> / <justify-items>

---

justify-content 与 align-content

    有的时候你的整个grid会比container小，这种情况一般发生在所有的items都用了非弹性的单位来指定大小（比如 px），这个时候你可以通过设置justify-content（行）与align-content（列）来确定grid在grid-content的排布方式。值和例子分别如下：

    start：从container的开始填充

    end：从container的结尾填充

    center：从container的中间

    stretch：缩放使得完全填充满container的宽度（justify-content）/高度（align-content）

    space-around：为每一列/行会平均分配空隙，边缘处的空隙只有中间的一半，相当于给每一 列/行平均设置margin。

    space-between：为每一列/行会平均分配空隙，边缘处不设置空隙。

    space-evenly：为每一列/行会平均分配空隙，边缘处的空隙与中间一样。

place-content:

    align-content 与 justify-content的简写模式：

    place-content：<align-content> / <justify-content>

---

grid-auto-columns/grid-auto-rows:

    为一些自动生成的grid tracks（又称为隐形tracks）指定大小。一般这种情况发生在你的grid items比cells还要多，或者指定了一个超出边界的grid item的时候，值可以是 数字，百分比，或者有 fr 定义的分数。

    下面解释一下隐形tracks的产生情况：

    .container{ grid-template-columns: 60px 60px; grid-template-rows: 90px 90px} 。生成如下2*2 的container:

这个时候想象一下有一个item你是这样定位的：

    .item-a{ grid-column: 1 / 2; grid-row: 2 / 3;}

    .item-b{ grid-column: 5 / 6; grid-row: 2 / 3;}

    我们设置 .item-b 位与第二行，第五列，但是我们只定义了2行2列，.item-b 的位置并不真实存在，所以，这时隐藏 tracks会以宽度为0的形式产生来填补这个空缺，而 grid-auto-columns 和 grid-auto-rows 就是来指定隐藏 tracks的大小的。比如我们设定：

    .container{ grid-auto-columns: 60px;}，那么上图将会变为：

---

grid-auto-flow：

    用来规定那些没有指定具体位置的 grid-items 的布局方向。值有：

    row：默认属性，一行一行的排列，必要时会添加新的行

    column：一列一列的排列，必要时会添加新的列

    dense：如果稍后出现较小的网格项时，尝试填充网格中较早的空缺

    然后你指定了2个item的确定位置：

    剩下的b , c , d将会这么排布：

    如果将 grid-auto-flow 修改成 column，排布将会发生如下改变：

兼容性