grid 专题
明确整体概念 网格+内容
以及审查时会有虚线网格帮助显示喔
明确网格
列：
grid-template-columns
The new fr unit represents a fraction of the available space in the grid container.
fr就相当于flex的grow/shrink的比例拉
还有repeat的关键字 repeat(3, 1fr) 也可以搭配其他track一起用
行：
grid-auto-rows
grid-template-areas
用子块的name合成<下面会讲到>
简写grid-template = grid-template-areas grid-template-rows / grid-template-column
排列顺序
grid-auto-flow: row/ column / row dense / column dense
终极简写grid可以包括所有以上…可是把我真的看晕了……
grid area
以上会形成一张虚拟的网格，如果不给每个item设置长宽度的话，那么默认就按网格排列。神奇的是可以position item使之横跨多个网格！可以重叠并利用z-index改变层次！
其值为column line和row line，
用数字表示：
如果有两个网格的话就是从1到3。也可以倒着数从-3到-1.
若[1/-1]则表示一整行/列
亦有关键词span，代表跨度：
若有2/span 2则代表第二三个网格区域。
{
grid-column-start/ grid-column-end
grid-row-start/ grid-row-end
}
简写形式{grid-column: 1/2; grid-row: 1/4}这样
可进一步简写成row start/column start/row end/column end {grid-area: 1 1 4 2;}
https://codepen.io/DearVikki/pen/xWaMpM
或直接用grid-area的名字来指明。有种拼图游戏的感觉呀！
https://codepen.io/DearVikki/pen/jzvJWp
用grid-column-gap和grid-row-gap（简写grid-gap: grid-row-gap grid-column-gap）来设置grid gap，这个gap可以理解成实心无色的大粗线。
nesting grid也很好用 父子之间无继承关系。暂有未标准化的规范display: subgrid来继承父grid的网格结构。
grid与flexbox:
grid是双向的 后者单向
flex：如下 允许grow的情况
如图 事实上每行row都相当于一个new flex container，无法控制列，所以第二行的每个元素不会在第一行之下。
而用grid的话就是标准的网格状了。
A simple question to ask yourself when deciding between grid or flexbox is:
flexbox: 需要仅通过行/列来控制。内容决定外部layout。
grid: 需要同时通过行和列来控制。外部layout决定内容定位。
这个好玩！如果设置grid三竖行的话那么无论多窄都是三竖行平分。事实上是可以设置item的width或min-width，空间不够折行的。
设置宽度+空间不够折行： grid-template-columns: repeat(auto-fill, 200px);
设置最小宽度+空间不够折行：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
给item设置position:absolute
可以的 但是奇怪的是top和left的参照点是自己本应该在的定位位置，而不是grid container的(0,0）。在我看来这更像是transform: translate…
example:
页面布局大杀器！！https://gridbyexample.com/examples/ 这里有各类布局模拟…
another ref: http://labs.jensimmons.com/
refs:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid