页面布局之grid布局

Grid布局

       首先，从概念上来说这是一个网格布局，核心是网格容器（Grid Container）和网格项（Grid Item），也就是parent和children的关系。与flex布局相类似

       网格系统引入了新的单位：分数fr，每一个fr单元分配一个可用空间，如果元素被设置为1fr 1fr 1fr 1fr，那么空间就会被平均分配为4份，每一个元素分别占1/4。

      对于网格容器，设置css样式为display:grid。分割网格容器：grid-template-columns:20% 20% 20% 20% 20%，表示将网格等分为5列，也可以简写为：grid-template-columns:repeat(5,20%) ，同样grid-template-rows也是一样的用法。其中repeat为函数。grid-template：50% 50% / 200px将创建一个具有两行的网格，每一行占据50%，以及一个200px的列。 grid-template：60% / 200px，表示60%的高度，200像素的宽。

.contain{
display:grid;
justify-items:center;
grid-template-columns:repeat(5,20%);
}

       grid-columns-gap和grid-row-gap为网格线的宽度，类似于行/列之间的间距宽度。justify-items的用法和flex中的用法是一样。

       auto-fit，自适应的意思，可以这样使用grid-template-columns-repeat(auto-fit,50px)表示网格布局系统会自动根据浏览器自行计算以及分布n个50px宽度的网格项。

       grid-template-columns不仅仅接收百分比的值，也接收像素或者em这样的长度单位，甚至也可以混用，例如，grid-template-columns:100px 3em 40%。当列的宽度采用像素，百分比或者em的单位的时候，其他使用fr单位设置的列将会平分剩下的空间。grid-template-columns:50px 1fr 1fr 1fr 50px。

       对于网格项，grid-column-start、grid-column-end、grid-row-start、grid-row-end，表示行列的起始位置以及占位。

.items{
grid-column-start:1;
grid-column-end:3;
grid-row-start:2;
grid-row-end:4;
}

也可以简写：grid-area:2/1/4/3;（格式为：grid-row-start/grid-column-start/grid-row-end/grid-column-end）。

针对grid-column-end和grid-row-end也可以用span关键字来写，比如：grid-row-end：span 2，用span来指定需要跨越的宽度。

对于行而言，可以这样简写：grid-row：1/3，从第一条线开始，到第三条线结束。同样列也是这样的。

更快的学习Grid布局的小游戏:GRID GARDEN。

以及其它的参考文章：http://www.css88.com/archives/8506

https://www.jianshu.com/p/5181bb590a9e?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation