1.4 grid布局-flex它大表哥-refer to 《CSS in Depth》

grid诞生

css玩家都知道，我们在玩一些布局的时候，时不时地，我们需要为我们的布局加一些前缀，老师们也说过，有的可以不用加。这是因为浏览器在自己实现一些功能时，需要有一个试验期，保证自己产品地稳定性，而各个浏览器引擎都有自己的实现方式，所以有不同的名称前缀。而前面的flexbox也就经历了这样一个时间段，耗时好几年。

而grid布局与之前的不同，2017年3月，只用了3周时间，Firefox、Chrome、Opera and Safari 全部实现了grid布局。2017年6月浏览器支持率到达70%包括微软Edge浏览器。

Grid 与 Flex

相比于flex，grid一开始的目的就是为了纯粹的网页布局。

1. flex是一维布局，而grid是二维。
2. flex从内容向外，grid从布局向内

grid解决了flex不能准确定位的问题，总的来说，两者可以互相配合，grid主外，flex主内。

gril基本使用

容器声明

display: grid 与flex相同，对外是block，子元素是对应的 grid-items，并且也有相应 的inline-grid(内容填充宽度）。

行描述grid track

容器描述

grid-template-columns: 1fr 1fr 1fr
grid-template-row: 1fr 1fr
1fr表示占一个比例，fr为grid专有单位。可以用其它长度单位。
columns代表一行多少列，row是一共有多少行。template 代表是一个摸板，子元素会按照定义的模板默认安放。多少个值，代表有多少行列。

子元素描述

grid-column: x1 / x2;
grid-row: y1 / y2;
/ 前后表示 x1(y1)行(列)开始到x2(y2)行(列)。

只要一行： grid-row: span 1 （1为默认可以不写）

grid-gap间距

线描述grid line

容器描述

grid-template-columns: [start] 1fr [middle] 1fr [middle] 1fr [end]
grid-template-row: [start] 1fr [middle] 1fr [end]

子元素描述

grid-column: start / middle 2 从start线到第二条middle线
grid-column: start / end 从start线到end线

区域描述

容器描述

grid-teplate-areas: "title title"
                    "nav nav"
                    "main aside1"
                    "main aside2";

空格分开。
只能像一个矩形模样，其它会出错。不用的格子用“.”表示。

子元素描述

grid-area: title
grid-area: aside1
表示自己所占区域

拓展

1. repeat(time, value)可以减少书写量
2. minmax(min,max)表示范围值
3. auto-fill,auto-fit用于repeat的time参数：自动填充
4. grid-auto-flow: dense || [ row | column] 改变填充方式
5. 对齐方式有水平前缀justify，竖直前缀align,后缀有content、items、self