//cover是容器。cover{display:grid;}网格线：用来划分容器的线。分为水平网格线和垂直网格线，容器可以分为行和列。行和列：水平分割线将容器分成几行（n行需要n+1条水平分割线）；垂直网格线将容器分成列（n列需要n+1条垂直分割线）cells：行和列交叉形成一个单元格项：采用网格定位的容器内部的子元素只能是顶层元素，称为“项目”。重要的是要了解单元格和项目不是一回事。不要混淆。大致理解概念？然后使用容器和项目的属性进行网格布局。2.容器属性下面主要通过7个属性来设置构建容器。grid-template-columns/grid-template-rows设置列/行内容的属性grid-gap设置列/行间距的属性grid-template-areas设置单元格区域的属性grid-auto-flow设置的属性celldirectionplace-items设置单元格中内容排列位置的属性place-content设置整个内容区域在容器中的位置属性grid-auto-columns/grid-auto-rows设置单元格属性超出originalgrid1.grid-template-columns/grid-template-rows通过display:grid指定节点后使用网格布局，是时候开始构建我们的行和列了。grid-template-columns设置列属性；grid-template-rows设置行属性；该属性可以用来设置行高和列宽，设置参数的值有多种写法：下面设置一个3行4列的表格，每个单元格的间距为100px；下面主要以列为例，行的用法同上。这个属性的值有很多，耐心等待。1》使用绝对单位grid-template-columns:100px100px100px100px;grid-template-rows:100px100px100px;2》使用百分比%除了使用单位px，还可以使用%；网格模板列：25%25%25%25%；网格模板行：33%33%33%；3》使用repeat方法当grid和repeats很多的时候，可以使用repeat。repeat接受两个参数，第一个参数是重复的次数，第二个参数是要重复的值。grid-template-rows：repeat(3,33%);grid-template-columns:repeat(4,25%);repeat除了重复值，还可以重复模式：grid-template-columns:repeat(2,100px100px);ifrepeat中的第一个参数改为3，表示将上面的pattern重复3次，所以下图中的cell空间已经超过了容器，如果我们不希望超过，我们希望容器自动判断是否填充，可以使用auto-fill关键字。grid-template-columns:repeat(auto-fill,100px20px80px);4》fr关键字fr（fraction的缩写，意为“碎片”），如果两列的宽度分别为1fr和2fr，表示后者它是前者的两倍。也可以和px结合使用，剩余空间按照fr分配。网格模板列：50px3fr1fr2fr；5》minmax()方法minmax()接受2个参数，最小值和最大长度范围，列/行的大小会根据剩余空间自动分配，大小在长度范围内。grid-template-columns:150px1fr1frminmax(50px,150px);6》auto关键字auto关键字表示长度由浏览器自己决定。网格模板列：100px自动130px100px；第二列会根据剩余空间自动分配空间。7.除了可以设置网格线名称的大小外，还可以设置网格线的名称。使用方括号指定每条网格线的名称以供将来参考。4列需要5条分割线，分割线名称可以重复。网格模板列：[c1]100px[c2]100px[c1]100px[c3]auto[c4];2.grid-gapgrid-gap属性用于设置行/列间距，即grid-row-gap属性，grid-column-gap属性，merge的简写。这三个属性的最新标准不用写前缀，写为：row-gap,column-gap,gap。网格行间距：10px；网格列间隙：20px；相当于下面的代码：grid-gap:10px20px;相当于：间隙：10px20px；3.grid-template-areas网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。网格模板区域：'aaaa''bbbb''de。G';1.写同名单元格合并区域2.如果有些区域不需要使用，用“点”（.）表示。区域的命名会影响网格线。每个区域的起始网格线将自动命名为区域名称-start，结束网格线将自动命名为区域名称-end。4、grid-auto-flow划分网格后，容器的子元素（item）会自动按顺序放入每个网格中。默认的放置顺序是“先行后列”，即先填充第一行，再开始第二行。grid-auto-flow决定放置顺序，默认值为row。grid-auto-flow:column;//放置顺序可以改为先列后行。在指定**item**的位置时，见下图，item1上面会有一块未使用的区域。.item1{grid-row-start:2;网格行尾：4；}grid-auto-flow:columndense;//dense的意思是尽量填满，不要有空格。5.place-items从前面的一些图可以看出，网格布局的边界非常清晰，但是我们的items内容总是隐藏在单元格的左上角，显得很胆小。哼！我们当然要找出来。place-items决定了item的水平和垂直位置，是justify-items（水平位置）属性和align-items（垂直位置）属性的组合缩写：place-items：center中心；相当于：justify-items:centeralign-items:center当然除了center的属性值，具体属性值如下：start：对齐单元格的起始边。end：对齐到单元格的结束边缘。center：单元格在内部居中。stretch：拉伸，当未指定项目大小时——填充单元格的整个宽度（默认值）。如果省略第二个值，浏览器认为它等于第一个值。6.place-content如果我们把容器设置大一些，我们会发现整个内容区域在容器中的位置也隐藏在了左上角，可以通过place-content来设置。使用方法和上面的place-items大致相同。place-content是justify-content（水平方向）属性和align-content（垂直方向）属性的缩写。place-content:center属性具有以下值：start-与容器的起始边界对齐。end-对齐容器的结束边界。center-将容器居中。stretch-当未指定项目大小时，拉伸以占据整个网格容器。space-around-每个项目两侧的间距相等。因此，项目之间的间距是项目与容器边界之间间距的两倍space-between-项目之间的间距相等，项目与容器边界之间没有间距。space-evenly-项与项之间的间距相等，项与容器边框之间的空间也是如此。7.grid-auto-columns/grid-auto-rows当item超出容器，cell属性设置超出原网格时，超出的cell大小会和item大小一样。可以通过grid-auto-columns/grid-auto-rows设置多余单元格的大小。设置行超出容器的项，行高将与项的高度相同。.item1{网格行开始：4；网格行尾：5；}设置多余行的高度为200px，如下图grid-auto-rows:200px;简写方式有如下两种：grid-templateattribute是grid-template-columns、grid-template-rows和grid-template-areas的组合简写形式。网格属性是网格模板行、网格模板列、网格模板区域、网格自动行、网格自动列和网格自动流六个属性的组合缩写。3.项目属性grid-column/grid-row设置项目位置grid-area设置项目放置区域place-self设置项目在单元格中的位置1.grid-column/grid-row这个属性上面已经用到了，即设置项目在容器中的位置。grid-column是grid-column-start（左边框所在的垂直网格线）、grid-column-end（右边框所在的垂直网格线）的缩写。grid-row是grid-row-start（上边框所在的水平网格线）和grid-row-end（下边框所在的水平网格线）的缩写。.item-1{网格列：1/3;grid-row:1/2;}/*同*/.item-1{grid-column-start:1;网格列端：3；网格-行开始：1；grid-row-end:2;}1.行数可以用数字指定。下面只设置了列的开始和结束，如果没有设置行，则在默认位置。.item1{网格列开始：1;网格列端：2；}2。也可以设置为**grid-template-columns**指定的网格线的名称。grid-template-columns:[c1]100px[c2]100px[c1]100px[c3]100px[c4];.item1{grid-column-start:c2;网格列末端：c3；}3.使用span关键字，意思是“跨越”，即左右边界（上下边界）之间跨越了多少个格子。.item1{网格列开始：2;网格列端：跨度2；}等同于：.item1{grid-column:2/span2}2.grid-area设置item在容器中的区域位置。同上通过分割线，所以也可以作为分割线4个属性的简称。grid-template-areas:'aaaa''aaaa''dccc'.item1{grid-area:a}等同于：.item1{grid-area:1/1/1/span4}3.place-self与place-items的用法相同，但仅适用于单个项目，可以覆盖place-items的值。它是justify-self（设置单元格内容的水平位置为左、中、右）和align-self（设置单元格内容的垂直位置为上、中、下）的缩写。.cover{place-items:center}.item1{place-self:start}如果参考文章有问题！欢迎指正