grid网格系统（grid布局显示网格线）

大家好，我是讯享网，很高兴认识大家。

 <p>CSS&#32593;&#26684;&#24067;&#23616;&#65288;Grid&#65289;&#26159;&#19968;&#22871;&#20108;&#32500;&#30340;&#39029;&#38754;&#24067;&#23616;&#31995;&#32479;&#65292;&#23427;&#30340;&#20986;&#29616;&#23558;&#23436;&#20840;&#39072;&#35206;&#39029;&#38754;&#24067;&#23616;&#30340;&#20256;&#32479;&#26041;&#24335;&#12290;&#21019;&#24314;&#26412;&#25945;&#31243;&#30340;&#30446;&#30340;&#26159;&#20026;&#20102;&#24110;&#21161;&#24744;&#26356;&#22909;&#22320;&#29702;&#35299;&#21644;&#23398;&#20064;&#32593;&#26684;&#24067;&#23616;&#65288;Grid&#65289;&#12290;</p><p>&#23558;&#23646;&#24615; &#20540;&#35774;&#20026; &#25110; &#23601;&#21019;&#24314;&#20102;&#19968;&#20010;&#32593;&#26684;&#23481;&#22120;&#65292;&#25152;&#26377;&#23481;&#22120;&#30452;&#25509;&#23376;&#32467;&#28857;&#33258;&#21160;&#25104;&#20026;&#32593;&#26684;&#39033;&#30446;&#12290;</p><pre>grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;

讯享网

｝

网格项目按行排列，网格项目占用整个容器的宽度。

讯享网

演示程序

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-grid; ｝

网格项目按行排列，网格项目宽度由自身宽度决定。

演示程序

属性和用于显示定义网格，分别用于定义行轨道和列轨道。

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;50px&nbsp;100px； ｝

属性用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）

网格项目1的行高是50px，网格项目2的行高是100px。

因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。

演示程序

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;90px&nbsp;50px&nbsp;120px； ｝

类似于行的定义，属性用于定义列的尺寸。

因为定义中只有三列，所以项目4，5，6排在新的一行; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。

网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。

演示程序

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;2fr； ｝

单位用于表示轨道尺寸配额，表示按配额比例分配可用空间。

本例中，项目1占 ¹⁄₄ 宽度，项目2占 ¹⁄₄ 宽度，项目3占 ¹⁄₂ 宽度。

演示程序

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;3rem&nbsp;25%&nbsp;1fr&nbsp;2fr； ｝

单位和其它长度单位混合使用时，的计算基于其它单位分配后的剩余空间。

本例中，

演示程序

函数用于定义轨道最小/最大边界值。

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;minmax(100px,&nbsp;auto);&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;minmax(auto,&nbsp;50%)&nbsp;1fr&nbsp;3em; ｝

函数接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。

本例中，第一行最小高度设置成100px，但是最大高度设置成，表示行高可以根据内容伸长超过100px。

本例中，第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。

演示程序

函数用来定义重复的网格轨道，尤其适用于有多个相同项目的情况下。

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;repeat(4,&nbsp;100px);&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;repeat(3,&nbsp;1fr); ｝

函数接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。

演示程序

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;30px&nbsp;repeat(3,&nbsp;1fr)&nbsp;30px; ｝

函数可以用在轨道定义列表当中。

本例中，第1列和第5列的宽度是30px。函数创建了中间3列，每一列宽度都是。

演示程序

属性和用于定义网格间隙。

网格间隙只创建在行列之间，项目与边界之间无间隙。

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-gap:&nbsp;&nbsp;&nbsp;&nbsp;20px;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-gap:&nbsp;5rem; ｝

间隙尺寸可以是任何非负的长度值（px，%，em等）。

演示程序

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-gap:&nbsp;100px&nbsp;1em; ｝

属性是和的简写形式。

第一个值表示行间隙，第二个值表示列间隙。

演示程序

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-gap:&nbsp;2rem; ｝

如只有一个值，则其即表示行间隙，也表示列间隙。

演示程序

网格线本质上是用来表示网格轨道的开始和结束。

每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;3;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;3; }

这是一个3行2列的网格，即在行上有4条网格线，在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。

本例中，项目只跨越一行一列，则和的定义可以省略。

演示程序

讯享网.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;&nbsp;&nbsp;&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;3&nbsp;/&nbsp;4; }

属性是和的简写形式。

如果只指定一个值，它表示。

如果两个值都指定，第一个表示，第二个值表示。而且你必须用斜杠（/）分隔这两个值。

演示程序

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-area:&nbsp;2&nbsp;/&nbsp;2&nbsp;/&nbsp;3&nbsp;/&nbsp;3; }

属性是 , , 和的简写形式。

如果四个值都指定，则第一个表示 , 第二个表示 , 第三个表示 ,第四个表示。

演示程序

网格项目默认都占用一行和一列，但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。

讯享网.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;&nbsp;&nbsp;4; }

通过和属性值的设置，使该网格项目跨越多列。

演示程序

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;&nbsp;&nbsp;4; }

通过和属性值的设置，使该网格项目跨越多行。

演示程序

讯享网.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;/&nbsp;5;&nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;2&nbsp;/&nbsp;4; }

简写属性和即能用来定位项目，也能用来使项目跨越多个行列。

演示程序

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;/&nbsp;span&nbsp;3;&nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;span&nbsp;2; }

关键字用来指定跨越行或列的数量。

演示程序

当利用属性和定义网格时，可以同时定义网格线的名称。网格线名称可以用于定位网格项目。

讯享网grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;[row-1-start]&nbsp;1fr&nbsp;[row-2-start]&nbsp;1fr&nbsp;[row-2-end];&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;[col-1-start]&nbsp;1fr&nbsp;[col-2-start]&nbsp;1fr&nbsp;[col-3-start]&nbsp;1fr&nbsp;[col-3-end]; ｝

用属性和定义网格，同时定义网格线名称。

为避免混淆，网格线名称应避免使用规范中的关键字（等）。

定义网格线名称的方法是要将其放在中括号内（），并要和网格轨道相对应。

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;[row-start&nbsp;row-1-start]&nbsp;1fr&nbsp;[row-1-end&nbsp;row-2-start]&nbsp;1fr&nbsp;[row-2-end&nbsp;row-end];&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;[col-start]&nbsp;1fr&nbsp;[col-2-start]&nbsp;1fr&nbsp;[col-3-start]&nbsp;1fr&nbsp;[col-end]; ｝

可以给同一网格线定义多个名称，方法就是在中括号内用空格将多个名称分开。

每一个网格线名都可以被引用，以用来定位网格项目。

利用命名的网格线，可以很方便地进行项目定位。

讯享网.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;&nbsp;&nbsp;&nbsp;row-2-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;row-end;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;col-2-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;&nbsp;&nbsp;col-end; }

引用网格线名称不用加中括号。

演示程序

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;&nbsp;&nbsp;&nbsp;row-2-start&nbsp;/&nbsp;row-end;&nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;col-2-start&nbsp;/&nbsp;col-end; }

简写属性和也可以利用网格线名称来定位项目。

演示程序

函数可以定义同名网格线。这节省了给每条网格都命名的时间。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;repeat(3,&nbsp;[row-start]&nbsp;1fr&nbsp;[row-end]);&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;repeat(3,&nbsp;[col-start]&nbsp;1fr&nbsp;[col-end]); }

函数可以用来定义同名网格线。这样多个网格线拥有相同的名字。

同名网格线会被分配一个位置编号，做为其唯一标识。

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;&nbsp;&nbsp;&nbsp;row-start&nbsp;2&nbsp;/&nbsp;row-end&nbsp;3;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;col-start&nbsp;/&nbsp;col-start&nbsp;3; }

用同名网格线来定位项目时，应注意在网格线名称和编号之间有一个空格。

本例中，项目1的行定位开始于第2条名称是的网格线，结束于第3条名称是的网格线；列定位开始于第1条名称是的网格线，结束于第3条名称是的网格线。

演示程序

如同网格线命名，可以用属性给网格区域命名。网格区域名称可以用来定位网格项目。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-areas:&nbsp;&nbsp;&nbsp;“header&nbsp;header” &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“content&nbsp;sidebar” &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“footer&nbsp;footer”;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;150px&nbsp;1fr&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;200px; }

一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。

每一组名称定义一行，每一个名称定义一列。

header&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;header;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;header;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;header;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;header; }

网格区域名称可以用在属性, , , 和的值中，用来定位项目。

讯享网footer&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row:&nbsp;footer;&nbsp;&nbsp;&nbsp;&nbsp;grid-column:&nbsp;footer; }

网格区域名称也可以用于简写属性和的值中。

aside&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-area:&nbsp;sidebar; }

网格区域名称也可以用于简写属性的值中。

演示程序

隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。

隐式网格可以通过属性 , , 和来定义。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;70px;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;repeat(2,&nbsp;1fr);&nbsp;&nbsp;&nbsp;&nbsp;grid-auto-rows:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;140px; }

本例中，只定一个行轨道，因此项目 1 和 2 高 70px 。

第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。属性定义了隐式网格的行轨道尺寸，即项目3和4的高度是 140px 。

演示程序

grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-auto-flow:&nbsp;row; }

缺省的网格布局方向是行的方向（）。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-auto-flow:&nbsp;column; }

网格的布局方向可以定义为列的方向（column）。

grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;30px&nbsp;60px;&nbsp;&nbsp;&nbsp;&nbsp;grid-auto-flow:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;column;&nbsp;&nbsp;&nbsp;&nbsp;grid-auto-columns:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1fr; }

本例中，我们只定义了两个列轨道的尺寸30px 和 60px。

隐式网格中自动创建其它列并给项目3，4，5分配空间；分配的空间尺寸是通过属性定义的。

演示程序

网格线名称可以任意指定，但分配以和结尾的名字有额外的益处，这样隐式地创建了具名网格区域，该名称可以用于项目定位。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;[outer-start]&nbsp;1fr&nbsp;[inner-start]&nbsp;1fr&nbsp;[inner-end]&nbsp;1fr&nbsp;[outer-end];&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;[outer-start]&nbsp;1fr&nbsp;[inner-start]&nbsp;1fr&nbsp;[inner-end]&nbsp;1fr&nbsp;[outer-end]; }

本例中，行和列都有名为和的网格线，它们隐式地给网格区域分派了名称（）。

item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-area:&nbsp;inner; }

这样我们就能够直接使用网格区域名来定位，而不需要再用网格线来定位项目了。

演示程序

隐式命名网格线和隐式命名的网格区域的工作原理刚好相反。

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;grid;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-areas:&nbsp;&nbsp;&nbsp;“header&nbsp;header” &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“content&nbsp;sidebar” &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“footer&nbsp;footer”;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;&nbsp;&nbsp;&nbsp;80px&nbsp;1fr&nbsp;40px;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;200px; }

定义网格区域时隐式的命名了网格线的名称。这些网格线的名称是基于区域名加上或后缀组成的。

item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;&nbsp;&nbsp;&nbsp;header-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;footer-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;&nbsp;&nbsp;sidebar-end; }

本例中，header是通过隐式网格线名称进行定位的。

演示程序

通过项目定位可以使多个项目层叠在一起，属性可以改变层叠项目的层次。

讯享网.item-1,&nbsp;.item-2&nbsp;{&nbsp;&nbsp;grid-row-start:&nbsp;&nbsp;1;&nbsp;&nbsp;grid-column-end:&nbsp;span&nbsp;2; }.item-1&nbsp;{&nbsp;grid-column-start:&nbsp;1;&nbsp;z-index:&nbsp;1;&nbsp;}.item-2&nbsp;{&nbsp;grid-column-start:&nbsp;2&nbsp;}

本例中，项目1 和 2 行定位开始于第1条行网格线，并跨越两列。

两个项目都是用网格线编号进行定位。项目1起始于第1条列网格线，项目2起始于第2条列网格线，这使得两个项目在第一行中间列发生层叠。

缺省情况下，项目2将层叠于项目1之上；然而，给项目1设置属性就使得项目1层叠于项目2之上。

演示程序

.overlay&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-row-start:&nbsp;&nbsp;&nbsp;&nbsp;header-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-row-end:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content-end;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-start:&nbsp;content-start;&nbsp;&nbsp;&nbsp;&nbsp;grid-column-end:&nbsp;&nbsp;&nbsp;sidebar-start;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1; }

本例中，利用在定义中的隐式网格线名称，定位了一个网格项目（），并将层叠于上层。

演示程序

CSS的盒模型对齐模块补充了CSS网格的内容，网格项目可以按行或列的轴线方向实现多种对齐方式。

属性和以行轴为参照对齐项目，属性和以列轴为参照对齐项目。

属性和是网格容器的属性，并支持如下这些值：

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;80px&nbsp;80px;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-areas:&nbsp;“content&nbsp;content” &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“content&nbsp;content”; }.item&nbsp;{&nbsp;grid-area:&nbsp;content&nbsp;}.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-items:&nbsp;start }

在行的轴线起点处对齐。

演示程序

grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-items:&nbsp;center; }

在行的轴线中点处对齐。

演示程序

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-items:&nbsp;end; }

在行的轴线终点处对齐。

演示程序

grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-items:&nbsp;stretch; }

在行的轴线方向延伸并填满整个区域。是缺省值。

演示程序

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;start; }

在列的轴线起点处对齐。

演示程序

grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center; }

在列的轴线中点处对齐。

演示程序

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;end; }

在列的轴线终点处对齐。

演示程序

grid&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;stretch; }

在列的轴线方向延伸并填满整个区域。

演示程序

讯享网grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-items:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;&nbsp;&nbsp;center; }

项目定位于行轴和列轴线的中间位置。

演示程序

项目可以用属性align-self 和 justify-self定义自己的对齐方式，并支持如下这些属性值：

.item1&nbsp;{&nbsp;justify-self:&nbsp;start&nbsp;}.item2&nbsp;{&nbsp;justify-self:&nbsp;center&nbsp;}.item3&nbsp;{&nbsp;justify-self:&nbsp;end&nbsp;}

属性在行的轴线方向定义对齐方式。

演示程序

讯享网.item1&nbsp;{&nbsp;align-self:&nbsp;start&nbsp;}.item2&nbsp;{&nbsp;align-self:&nbsp;center&nbsp;}.item3&nbsp;{&nbsp;align-self:&nbsp;end&nbsp;}

属性在列的轴线方向定义对齐方式。

演示程序

.item1&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-self:&nbsp;center &nbsp;&nbsp;&nbsp;&nbsp;align-self:&nbsp;&nbsp;&nbsp;center }

项目1定位在行的轴线和列的轴线的中间位置。

演示程序

在网格容器中，网格轨道延轴线方向有多种对齐方式。

属性用于定义网格轨道延着行的轴线的对齐方式，而属性用于定义网格轨道沿着列的轴线的对齐方式。并分别支持如下属性：

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;grid-template-columns:&nbsp;repeat(4,&nbsp;45px);&nbsp;&nbsp;&nbsp;&nbsp;grid-template-rows:&nbsp;repeat(4,&nbsp;45px);&nbsp;&nbsp;&nbsp;&nbsp;grid-gap:&nbsp;0.5em;&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;start; }

列的轨道在行的轴线起点处对齐。是缺省值。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;end; }

列的轨道在行的轴线终点处对齐。

演示程序

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center; }

列的轨道在行的轴线中间处对齐。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-around; }

在每一列的两侧平均分配额外空间。

演示程序

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-between; }

在列与列之间平均分配额外的空间。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-evenly; }

在列与列之间及列与边界之间平均分配额外空间。

演示程序

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;start; }

行的轨道在列的轴线起点处对齐，属性是缺省值。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;end; }

行的轨道在列的轴线终点处对齐。

演示程序

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;center; }

行的轨道在列的轴线中点处对齐。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;space-around; }

每一行的两侧平均分配额外空间。

演示程序

讯享网.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;space-between; }

在行与行之间平均分配额外空间。

演示程序

.grid&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;align-content:&nbsp;space-evenly; }

在行与行之间及行与边界之间平均分配额外空间。

演示程序

本教程相对全面地介绍了网格的相关内容，但这并不是一个完整的技术文档。想更全面的学习相关内容，推荐访问 Mozilla开发者网络和 W3C 的网格文档。

由于能力有限，翻译中难免错误较多，还请大家多多谅解！

十分感谢原文作者Jonathan Suh在本文排版设计，示例制作，文字编辑等方面卓越的工作。

为了获得**的阅体验，请访问如下排版的教程：

【示例版】学习CSS网

译文出处

grid网格系统（grid布局显示网格线）

相关推荐