Grid布局Grid布局的概念是将容器分为“行”和“列”，生成cell，然后指定“item所在的cell”，可以看成是二维布局，而flex布局是轴布局，只能指定“item”在轴上的位置，可视为一维布局。Grid布局远比Flex布局强大。学习网格布局首先要了解一些名词概念的含义：网格容器：将元素设置为网格容器的方法，添加属性display:grid/inline-grid；容器上有特殊属性；gridlines：或者叫gridtrack，划分grid容器中的grid单元，用浏览器的GridInspector功能可以看到网格线；griditems：或称网格元素，是放置在网格容器中的Content；网格单元/网格区域：网格元素中的最小单元，多个网格单元可称为一个网格区域；网格间距：网格线/网格轨道的宽度称为网格间距；嵌套网格：网格容器中可以嵌套另一个或几个网格；GridInspector：浏览器提供的查看网格布局的工具；severalfunctionsandunits在网格布局中有几个独特的单位/功能：fr：网格容器中可用空间的二分之一repeat()：标识多个重复的部分，如repeat(3,100px)，表示3100px；minmax()：函数产生一个长度范围，表示长度在这个范围内，它接受两个参数，分别是最小值和最大值。例如minmax(100px,200px)表示长度范围为最小值100px，最大值200px；网格项跨越多个网格单元；auto-fill：有时网格单元的大小是固定的，但是容器的大小是不确定的。这个属性会根据容器的大小分配尽可能多的格子，剩下的会平均分配给格子。网格单元；空白网格单元留空；auto-fit：有时网格单元的大小是固定的，而容器的大小是不确定的。这个属性会根据容器的大小分配尽可能多的格子，剩下的会平分给格子单元；空白网格单元不留空，重新平均分配给网格单元；重点关注auto-fillauto-fitul{display:grid;的区别grid-template-columns:repeat(auto-fit,minmax(200px,1fr));//grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}核心是：grid-template-columns:repeat(auto-fit,minmax(200px,1fr));意思是每个子元素至少需要200px的宽度，如果视口宽度足够，剩余的空间会平均分配给每个子元素，至于换行问题，需要看所有分配的轨道空间都不够200，如果不够200，换行，多包裹元素，比如有580px（不考虑间隙），就容纳不下3*200=600，3个子元素，然后换行，1行2个子元素，剩下的80px呢，属于剩余空间，(1fr)平分给两个轨道。这里涉及到填充方式中auto-fit和auto-fill的区别，auto-fit和auto-fill只有在容器的宽度大于child的最小宽度之和时才会有显示差异元素。比如容器现在连同窗口的宽度都是1500px，要让子元素排成一行（不考虑间隙）总共需要600px。auto-fit和auto-fill会先创建尽可能多的最小宽度为200px的轨道，例如创建1500/200=7.5。那么就会有7条轨道的200px还有100px的剩余空间，然后这100px又会分配给这7条轨道，100/7=14.28。所以每条轨道的宽度现在是214.28px。到目前为止，自动填充和自动调整做同样的事情：首先创建一个宽度尽可能小的轨道；如果轨道少于一个，则将其平均划分为现有轨道；next:auto-filauto-fill以不同方式处理空白曲目。auto-fill不占用空白轨道，auto-fit将空白轨道平均分配给内容轨道；值得注意的是，这种区别是容器中元素的最小宽度小于容器中元素的总数。仅当宽度较宽时才会显示差异。如果元素个数的最小宽度大于容器宽度，那么自动填充和自动调整会表现出同样的效果。Grid布局和其他布局的区别。传统布局方式：使用position属性+display属性+float属性布局，兼容性最好，但是效率低，麻烦！flex布局：自带一套属性，效率高，学习成本低，兼容性强！网格布局：网格布局（grid）是最强大的布局方案，但是知识点较多，学习成本比较高。目前兼容性还不如flex布局！另外，可以通过设置属性，将grid布局改成和flex布局一样的效果。网格线编号布局当您使用网格布局时，编号线始终存在。这些行从1开始编号行和列。例如：我们定义一个三行三列的布局如下，我们在行和列方向上有4行。.wrapper{显示：网格；网格模板列：重复（3、1fr）；网格模板行：重复（3、100px）；}要求一个网格区域从左上角开始水平占据一列，垂直占据三行，可以这样写：grid-column-start:1;网格列端：2；网格行开始：1；grid-row-end:4;grid-column和grid-row可以简写如下：grid-column:1/2;网格行：1/4；可用的默认跨度为1，可以缩写如下：grid-column-start:1;网格行开始：1；网格行尾：4；可用的默认跨度为1加上grid-column，grid-row可以缩写为：grid-column:1;网格行：1/4；grid-area可以简写为：grid-area:1/1/4/2；可以使用span来表示简写span:grid-column:1;网格行：1/跨度3；网格线名称布局grid-template-rows和grid-template-columns属性定义grid，您可以命名网格线：.wrap{display:grid;网格模板列：[main-start]1fr[content-start]1fr[content-end]1fr[main-end]；grid-template-rows:[main-start]100px[content-start]100px[content-end]100px[content-end];}使用grid-area命名网格区域，然后隐式创建行和列网格线，例如：.wrap{显示：网格；网格模板列：[main-start]1fr[content-start]1fr[content-end]1fr[main-end]；网格-template-rows:[main-start]100px[content-start]100px[content-end]100px[content-end];}隐式命名的网格线：hd-starthd-end使用[sidebar-startmain-start]定义网格线的多个名称；加上网格线名称，可以用来定位布局项：.box1{grid-column-start:main-start;网格列端：主端；网格行开始：主要开始；grid-row-end:main-end;}网格区域名称布局使用grid-area命名网格区域，在网格容器中使用grid-template-areas指定区域的位置：.header{grid-area:hd}.footer{grid-area:ft}.sidebar{grid-area:sb}.content{grid-area:main}.wrap{display:grid;网格模板行：minmax（100px，自动）；网格模板列：重复（31fr）；grid-template-areas:"hdhdhd""sbmainmain""ftftft"}使用grid-template可以同时设置属性：grid-template-rows,grid-template-columns,grid-template-areas上面的例子可以简写为：.header{grid-area:hd}.footer{grid-area:ft}。sidebar{grid-area:sb}.content{grid-area:main}.wrap{display:grid;grid-template:"hdhdhd"minmax(100pxauto)"sbmainmain"minmax(100pxauto)"ftftft"minmax(100pxauto)/1fr1fr1fr}使用grid同时设置属性：网格模板行，网格模板列、网格模板区域、网格自动行、网格自动列、网格自动流；注意：此属性会将网格间隙值重置为0；上面的例子可以缩短：grid:"hdhdhd"minmax(100pxauto)"sbmainmain"minmax(100pxauto)"ftftft"minmax(100pxauto)/1fr1fr1fr}网格模板区域空白单元格带句点'.'占用;网格布局轴对齐网格布局模式下有两个轴用于对齐——块轴（一般是垂直的）和行轴（行内轴）。块方向的轴是块布局采用方向时块的排列。行轴垂直于块方向的轴，它遵循常规内联流中文本的方向。使元素与块轴对齐的属性是align-items作用于网格容器的属性align-items的值是：autonormalstartendcenterstretchbaselinefirstbaselinelastbaseline与作用于网格元素的属性align-self的值相同对齐项目。使元素与行轴对齐的属性是justify-itemsjustify-selfjustify-items作用于网格容器，justify-self作用于网格元素，与上述两个属性引用相同。place-items属性是align-items和justify-items的简写。place-self属性是align-self和justify-self的简写。grid轨道对齐block轴的属性是align-content，作用于grid容器，它的值是：normalstartendcenterstretchspace-aroundspace-betweenspace-evenlybaselinefirstbaselinelastbaseline网格轨道对齐行轴的属性是justify-content，其属性值与align-content相同，space-content是align-contentjustify-content的缩写。水平和垂直居中元素内容的示例布局：.wrapper{display:grid;网格模板列：重复（4、1fr）；grid-auto-rows:200px;}.item1{align-self:center;justify-self:center;}将元素在网格容器中水平和垂直居中：.wrapper{display:grid;网格模板列：重复（3、1fr）；网格模板行：重复（3、200px）；grid-template-areas:"...grid-template-columns:repeat(auto-fill,200px);}灵活轨道数：.wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
