参考阮一峰老师开发手册CSSGrid网格布局教程做的学习文章。这个属性的兼容性还是很感人的。Flex布局概述是轴布局，只能指定“item”相对于轴的位置，可视为一维布局。网格布局就是把容器分成“行”和“列”，生成单元格，然后指定“项所在的单元格”，可以看成是二维布局的基本概念1.容器：区域采用网格布局2．item：容器的顶级子元素3.行和列：容器内部的水平区域称为“行”（row），垂直区域称为“列”（column）4.单元格：行列相交区域5.网络线：划分网格的线，水平网格线划分行，垂直网格线划分列。容器属性1.display属性指定一个容器采用网格布局display:grid;//默认所有容器元素都是块级元素display:inline-grid;//也可以设置为内联元素注意设置为Aftergridlayout后，容器子元素（items）的float、display:inline-block、display:table-cell、vertical-align、column-*设置将失效。2.grid-template-columns属性、grid-template-rows属性grid-template-columns属性定义每列的列宽，grid-template-rows属性定义每行的行高。值可以是绝对单位或百分比grid-template-columns:100px100px50px;网格模板行：33.33%33.33%33.33%；1.repeat()目的：简化重复的值。接受两个参数，第一个参数是重复次数，第二个参数是要重复的值。grid-template-columns:repeat(3,33.33%);//相当于333.33%grid-template-columns:repeat(2,100px20px80px);//第一列和第四列为100px，第二列和第五列列为20px，第三列和第六列为80px。2、auto-fill关键字的作用：自动填充容器grid-template-columns:repeat(auto-fill,100px);//每列的宽度为`100px`，然后自动填充直到容器不能放置更多列。3、fr关键字的作用：item大小的比例关系grid-template-columns:150px1fr2fr;//第一列宽150像素，第二列宽是第三列的一半柱子。4.minmax()目的：生成一个长度范围，接受两个参数，分别是最小值和最大值。grid-template-columns:1fr1frminmax(100px,1fr);//表示列宽不小于100px不大于1fr5.auto用途：表示长度由浏览器自己决定grid-template-columns:100pxauto100px;//第二列宽度自适应，可以设置min-width。6.网格线名称用途：指定每条网格线的名称，以供日后参考。一行可以有多个名字grid-template-columns:[c1]100px[c2]100px[c3]auto[c4];grid-template-rows:[r1]100px[r2]100px[r3]auto[fifth-line第4行];7.布局示例grid-template-columns:70%30%;//布局37点grid-template-columns:repeat(12,1fr);//十二网布局3，grid-row-gap属性，grid-column-gap属性，grid-gap属性grid-row-gap属性设置行之间的间隔（rowspacing）grid-column-gap属性设置列之间的间隔（columnspacing）。grid-gap属性是grid-column-gap和grid-row-gap的组合简写。省略第二个值，浏览器认为第二个值等于第一个值。网格行间距：20px；grid-column-gap:20px;//这两个代码相当于grid-gap:20px20px;根据最新标准，删除了上述三个属性名的grid-前缀，grid-column-gap和grid-row-gap写为column-gap和row-gap，grid-gap写为gap.4.grid-template-areas属性网格布局允许指定一个“区域”，一个由单个或多个单元格组成的区域。grid-template-areas属性用于定义区域。//划分9个单元格，然后将它们命名为从`a`到`i`的九个区域grid-template-columns:100px100px100px;grid-template-rows:100px100px100px;grid-template-areas:'abc''def''ghi';//将9个单元格分成三个区域`a`、`b`和`c`。a,b,c可以是任意名称grid-template-areas:'aaa''bbb''ccc';//如果有些区域不需要使用，用“点”（`.`）来表示。网格模板区域：'a.c''d。f''g。我';请注意，区域的命名会影响网格线。每个区域的起始网格线将自动命名为区域名称-start，结束网格线将自动命名为区域名称-end。例如，如果该区域名为header，则起始位置的水平和垂直网格线称为header-start，结束位置的水平和垂直网格线称为header-end。5、grid-auto-flow属性设置容器子元素的放置顺序。默认是第一行和第二行。column变为“先列后行”。grid-auto-flow:row;grid-auto-flow:column;grid-auto-flow:rowdense;//表示“先行，后列”，尽可能紧密地填充，不要有空格。grid-auto-flow:columndense;//表示“先列，后行”，并尝试填充空格。6.justify-items属性、align-items属性、place-items属性justify-items属性设置单元格内容的水平位置align-items属性设置单元格内容的垂直位置（上、中、下）place-items属性是align-items属性和justify-items属性的组合简写。如果省略第二个值，浏览器认为它等于第一个值。证明项目：开始|结束|中心|拉伸；对齐项目：开始|结束|中心|拉紧;stretch：拉伸以填充单元格的整个宽度（默认）。7.justify-content属性、align-content属性、place-content属性justify-content属性是整个内容区域在容器中的水平位置（左、中、右）align-content属性是整个内容区域的垂直位置内容区域（上、中、下）。place-content属性是align-content和justify-content属性的组合简写。如果省略第二个值，则浏览器假定第二个值等于第一个值。证明内容：开始|结束|中心|伸展|环绕空间|间隔|空间均匀；对齐内容：开始|结束|中心|伸展|环绕空间|间隔|空间均匀；当未指定项目大小时，拉伸占据整个网格容器。space-around-每个项目两侧的间距相等。因此，项目之间的间距是项目与容器边框之间的间距的两倍。space-between-项目之间的间距相等，项目和容器边框之间没有空间。space-evenly-项与项之间的间距相等，项与容器边框之间的空间也是如此。8.grid-auto-columns属性，grid-auto-rows属性指定一些项目的位置，在现有网格之外。比如grid只有3列，但是第5行指定了某个item，此时浏览器会自动生成一个冗余的grid用于放置item。grid-auto-columns和grid-auto-rows属性用于设置浏览器自动创建的冗余网格的列宽和行高。它们的编写方式与grid-template-columns和grid-template-rows完全一样。如果不指定这两个属性，浏览器将根据单元格内容的大小来确定新添加的网格的列宽和行高。网格模板列：100px100px100px；网格模板行：100px100px100px；网格自动行：50px；9.grid-templateattribute，网格属性grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的组合简写。网格属性是网格模板行、网格模板列、网格模板区域、网格自动行、网格自动列和网格自动流六个属性的组合缩写。不建议使用合并属性编写。Item属性1.grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性可以指定item的位置。具体方法是指定item的四个边框，分别定位到哪条gridline上。grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线位于grid-row-end属性：下边框所在的水平网格线指定为网格线grid-column-start:2;//左边框为第二条垂直网格线grid-column-end:4;//Rightborder第四条垂直网格线的名称，指定为网格线grid-column-start:header-start;网格列结束：标题结束；使用span关键字表示“跨越”，即左右边框（上下边框之间要跨越多少个格子）。下面两个相当于grid-column-start:span2;网格列端：跨度2；2、grid-column属性、grid-row属性grid-column属性是grid-column-start和grid-column-end的组合简写grid-row属性是grid-row-start和grid-row-的组合简写结束属性。斜线和后面的部分可以省略，默认跨越一个网格。网格列：1/3；网格行：1/3；3、grid-area属性属性指定item放在哪个区域。grid-area:e;//指定位于e区域的grid-area属性。也可以作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的组合简写形式，直接指定item的位置。网格区域：<行开始>/<列开始>/<行结束>/<列结束>；网格面积：1/1/3/3；4.justify-self属性、align-self属性、place-self属性ustify-self属性设置单元格内容的水平位置（左、中、右），与justify-items的用法完全一样属性，但仅适用于单个项目。align-self属性设置单元格内容的垂直位置（顶部、中间、底部），与align-items属性完全相同，只对单个项目起作用。place-self属性是align-self和justify-self属性的组合简写。如果省略第二个值，place-self属性认为这两个值相等。自我辩护：开始|结束|中心|拉伸；对齐自我：开始|结束|中心|拉紧;
