GRIDLayoutCompatibilityIE10IE11支持老语法目前大部分浏览器都支持，还是停留在实验特性基本概念在容器属性中定义displaygrid-template-columnsgrid-template-rowsgrid-template-areasgrid-column-gapgrid-row-gapgrid-gapjustify-itemsalign-itemsjustify-contentalign-contentgrid-auto-columnsgrid-auto-rowsgrid-auto-flowgriddisplaygrid生成块级网络inline-grid生成内联网络subgrid作为网格项，需要继承父网格的行列大小grid-template-columnsgrid-template-columns设置行和列的大小grid-template-columns:40px50pxauto50px40px;grid-template-columns:[first]40px[line2]50px[line3]auto[col4-start]50px[five]40px[end];//line-nametrack-sizeline-name是行轨道或列轨道两侧的网格线grid-template-rows:[row1-start]25%[row1-endrow2-start]25%[row2-结尾];//网格线双名grid-template-columns:repeat(3,20px[col-start])5%;//相当于下面的表达式grid-template-columns:20px[col-start]20px[col-start]20px[col-start]5%;网格模板列：repeataat(3,1fr);//将容器分成三等份grid-template-columns:1fr50px1fr1fr;//fr的行和列将其余部分划分grid-template-areas通过获取网格项中grid-area属性的值（名称）来定义网格模板。重复的网格区域（grid-area）名称将跨越网格单元格，'.'代表空网格cells.container{display:grid;网格模板列：50px50px50px50px；网格模板行：自动；grid-template-areas:"headerheaderheaderheader""mainmain.sidebar""footerfooterfooterfooter"}.item-a{grid-area:header;}.item-b{网格区域：主要；}.item-c{网格区域：侧边栏；}.item-d{网格区域：页脚；}grid-gap:grid-row-gap和grid-column-gapjustify-itemsverticallytocolumngridlinesAlignstartendcenterstretch(default)align-items垂直于行网格线alignstartendcenterstretchjustify-content定义为px等非弹性单位，总的grid区域大小可能小于gridcontainer，设置grid水平对齐方法startAligntopendalignbottomcenteraligncenterstretch填充gridcontainerspace-aroundgriditems两边等间距，griditem之间的间距是一侧的两倍space-between对齐两边，griditem之间的间距相等space-evenly网格项目等距。align-contentgrid-auto-columnsgrid-auto-rows自动生成隐式网格轨道。当定位网格超出网格容器范围时，会自动创建一个隐式网络轨道网格-自动流行按行从左到右排列列按列从上到下密集排列按顺序排列网格网格:200pxauto/1frauto1fr;item属性grid-columngrid-column-startgrid-column-end缩写grid-rowgrid-row-startgrid-row-endgrid-area父容器定义grid-template-areasjustify-selfalign-selfjustify-self定义垂直于列网格线的单个网格项的对齐方式start:grid网格区域左对齐end:网格区域右对齐center:网格区域居中stretch:网格区域填充（默认）align-self定义垂直于行网格线的单个网格项的对齐方式
