grid布局

CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。

父元素{

          display : grid；

}

这还没有做任何事情，因为我们没有定义我们希望的 grid(网格) 是怎样的。它会简单地将6个 div 堆叠在一起。

Columns(列) 和 rows(行)

使用grid-template-row和grid-template-column属性

父元素{

       display: grid;     

        grid-template-columns: 200px 50px 100px;

        grid-template-rows: 100px 30px;

}

第一列宽200px，第二列宽50px，第三列宽100px

第一行高100px，第二行高30px

如果给的columns*rows大于子元素，会空着

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

3*3=9

子元素只有6个，剩下三个位置就会空着

如果再给子元素设置自身高宽，盒子之间会摞起来(可以自己测试一下设置了grid-template-columns再给子元素设置高宽)

定位和调整 items(子元素) 大小，我们将使用 grid-column 和 grid-row 属性来设置：

子元素{

grid-column-start: 1;

grid-column-end: 4;

}

当我们把第一个 items(子元素) 占据整个第一行时，它把剩下的 items(子元素) 都推到了下一行。

简写：

grid-column: 1 / 4;

grid-template-columns: repeat(12, 1fr);    

把一行平均分成12列。repeat(12, 1fr) 意思是 12 个重复的 1fr 值。 fr 是网格容器剩余空间的等分单位。

grid-template-rows: 50px 350px 50px;

grid-gap: 5px;    网格之间的间距是5px

详细文档：http://www.css88.com/archives/8510#prop-display

display: grid | inline-grid | subgrid;

• grid ：生成一个块级网格
• inline-grid ：生成一个内联网格
• subgrid ：如果你的网格容器本身是另一个网格的网格项（即嵌套网格），你可以使用这个属性来表示

 在 网格容器(Grid Container) 上使用column，float，clear， vertical-align 不会产生任何效果。

 grid-template-columns / grid-template-rows

grid-template-areas

四列三行

一个点代表空

grid-column-gap / grid-row-gap

grid-gap

grid-column-gap 和 grid-row-gap 的缩写语法

如果grid-row-gap没有定义，那么就会被设置为等同于 grid-column-gap 的值

justify-items