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



一、简介

​ 用于设置元素内部的布局类型为网格布局，其外显类型为块级元素。该类型的元素将内部分为行和列，划分成一个个单元格，并通过一系列相关属性控制单元格及其内容的布局和大小。

​ 该属性值的主要应用场景为：多行多列元素排列布局。

采用grid布局的元素，被称为“容器”（container），其内部的直接子元素被称为“项目”（item）。

​ 容器中水平X轴方向被称为“行”，垂直Y轴方向被称为“列”。行跟列所产生的交叉区域，就是“单元格”。

​ 划分网格的线，称为“网格线”，又根据行和列，被划分为“水平网格线”和“垂直网格线”。通常情况下，n行元素就会有n+1根水平网格线，m列元素就会有m+1根垂直网格线。

​ 当父元素设置为grid布局时，其内部子元素的、、等属性都将失效。

浏览器兼容性：

注意：该博客下的所有案例都以下面的dom结构为基础：

二、容器属性

1、属性列举

​ 设置的元素，即为容器元素，那么定义在容器上的相关属性，就被称为容器属性。容器上共有17条，包含以下：

• ： 定义每一列的列宽。
• ：定义每一行的行高。
• ：定义列与列之间的列间距，原属性名为：。
• ：定义行与行之间的行间距，原属性名为：。
• ：定义列间距和行间距，是与的简写形式，原属性名为：。
• ：定义网格区域名称。
• ：定义单元格排列顺序。
• ：定义单元格中内容的水平位置（左中右）。
• ：定义单元格中内容的垂直位置（上中下）。
• ： 定义单元格中内容的水平位置和垂直位置，是和的简写形式。
• ：定义容器中整体内容的水平位置（左中右）。
• ：定义容器中整体内容的垂直位置（上中下）。
• ：定义容器中整体内容的水平位置和垂直位置，是和的简写形式。
• ：定义容器中多余网格的列宽。
• ：定义容器中多余网格的行高。
• ：该属性是 、、 这三个属性的简写形式。
• ：该属性是、、、 、、 这六个属性的简写形式。

2、grid-template-columns

① 定义列宽的各种方式

​ 该属性用来定义网格布局中每一列的列宽，属性值可以是px、百分比、repeat()、auto-fill、auto-fit、fr、minmax()、auto等等。

px 单位就是定义一个固定的列宽：

页面效果：

百分比 单位定义的列宽，取决于容器的宽度，百分比的基数就是容器设置的宽度：

页面效果：

repeat(n,m) 方法用来简化重复的值，接收两个参数，第一个参数n，表示重复的次数，第二个参数值表示要重复的，而且可以与其他类型的属性值共同使用。还可以重复渲染一组数据，实际渲染的列数=重复的数据数量*重复的次数。

页面效果：

auto-fill 是一个关键字，通常与 方法结合使用，将其设置为参数n，表示在确定好列宽m和容器宽度的基础上，尽可能的在一行上填充更多的列。如果还剩余不足一列宽度的空间，则会将剩余空间空着占位。

页面效果：

fr 是一个关键字单位，是（片段）的缩写，实际意义表示比例关系，如果设置的中只包含，且容器设置了固定宽度，则的实际宽度为，然后再根据每个数据的值，得到对应列的列宽，例如设置容器宽度300px，设置列宽分别为：，则1fr=300/(1+2+3)=50px，计算出对应的列宽为： 50px 100px 150px。

页面效果：

如果设置的中只包含，且容器没有设置宽度，则的实际宽度取决于所有列的中的最大值，例如：设置列宽分别为：，列中对应的项目的宽度分别为：，根据对比40/1=40、100/2=50、120/3=40，得出50最大，因此1fr=50px，实际列宽将以这个单位为准。

页面效果：

如果设置的中同时包含和其他绝对长度单位，如果容器设置了固定宽度，则的实际宽度为，例如：设置容器宽度300px，设置列宽分别为：，则1fr=(300-150)/(2+3)=30px，计算出对应的列宽为： 150px 60px 90px；如果容器没有设置固定宽度，则的实际宽度取决于所有以fr为单位的列的中的最大值。

minmax(min,max) 是一个方法，用来指定一个范围，表示列宽的范围，其接受两个参数，分别为最小值和最大值。如果容器设置了宽度，且去掉设置的固定列宽后，剩余的宽度正好位于区间内，则取剩余空间值；如果剩余的宽度大于区间，则取区间最大值；如果剩余的宽度小于区间，则取区间最小值；如果容器未设置宽度，则取区间最大值。

页面效果（剩余宽度位于区间内）：

auto 是一个关键字，表示自适应宽度，如果容器设置了宽度，设置列宽为，则表示将容器的宽度去掉其他类型的宽度之后，剩余的宽度均分给设置了的列；如果容器没有设置宽度，设置列宽为，则表示列宽取当前列中宽度最大的项目的宽度为列宽。

页面效果（150px auto 100px）：

② 当实际列数少于定义的列数时

​ 该属性除了定义了列宽之外，属性值的数量还决定了列的数量，定义几个属性值，就会创建几列。即使实际列数小于定义的列数，但是缺失的列依旧会占据对应的空间，撑起容器的宽度。

​ 如果容器已经设置了宽度，则宽度不会受列数影响，就算有项目超出容器空间之外，超出的部分也不会影响其他元素的整体布局，不占用普通文档流位置。

页面效果（实际只有2个项目）：

③ 定义垂直网格线的名称

​ 该属性在定义列宽的同时，还可以使用定义垂直网格线的名称，在后续对单元格进行定位时，需要使用该名称。定义三列，则会产生四条垂直网格线。定义语法为：

​ 网格布局允许同一根线有多个名字，只需在中定义多个值即可，例如：。

3、grid-template-rows

① 定义行高的各种方式

​ 该属性用来定义网格布局中每一行的行高，属性值可以是px、百分比、repeat()、auto-fill、fr、minmax()、auto等等。

页面效果：

定义行高的方式整体与上面定义列宽的各种方式相同，此处只针对一些不同点讲述，其余就不进行太多赘述了。

auto-fill 关键字，在设置行高时，与设置列宽有所不同，将其设置为 的参数n，表示在确定好行高m和容器高度的基础上，尽可能的在一列上设置更多行的行高为m。如果容器的高度大于等于行数×行高，则所有行都能正常设置行高。如果容器的高度小于行数×行高，则先会从上到下的顺序依次设置行高为m，直到剩余空间小于m，然后剩余的行，均分剩余的空间，行高也就不再是m。

页面效果：

如果不设置某行的行高，且未设置容器高度，则该行将以当前行中所有项目的最大高度为行高；如果不设置某行的行高，但设置了容器高度，且已经设置的行高不超过容器高度，则所有未设置行高的行，均分容器剩余高度；如果不设置某行的行高，但设置了容器高度，且已经设置的行高超过了容器高度，则未设置行高的行，将以当前行中所有项目的最大高度为行高。

页面效果：

② 当实际行数不等于定义的行数时

​ 该属性除了定义了行高之外，属性值的数量还决定了行的数量，如果容器没有设置高度，即使实际行数小于定义的行数，但是缺失的行依旧会占据对应的空间，撑起容器的高度。如果实际的行数大于定义的行数，则多出来的行将会以本行中项目的最大高度为行高，撑起容器的高度。

​ 如果容器已经设置了高度，则高度不会受行数影响，就算有项目超出容器空间之外，超出的部分也不会影响其他元素的整体布局，不占用普通文档流位置。

页面效果（实际只有2个项目）：

③ 定义水平网格线的名称

​ 该属性在定义列宽的同时，还可以使用定义水平网格线的名称，在后续对单元格进行定位时，需要使用该名称。定义三行，则会产生四条水平网格线。定义语法为：

​ 网格布局允许同一根线有多个名字，只需在中定义多个值即可，比如。

4、column-gap（原grid-column-gap属性）

​ 该属性用来定义网格布局中列与列的之间的间隔，也就是列间距。列间距的只存在于列与列之间，也就是说如果有三列项目，则存在两个列间距。

页面效果：

5、row-gap（原grid-row-gap属性）

​ 该属性用来定义网格布局中行与行的之间的间隔，也就是行间距。行间距的只存在于行与行之间，也就是说如果有三行项目，则存在两个行间距。如果容器没有设置高度，则容器高度等于所有行高的和加上所有行间距的和。

页面效果：

6、gap

​ 属性是和的合并简写形式，属性值有两个，第一个值表示行间距的值，第二个值表示列间距的值。

​ 如果行间距和列间距的值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。

页面效果：

7、grid-template-areas

​ 该属性用于在网格布局中指定“区域”，一个区域可以由一个或多个单元格组成，定义的区域用于项目属性，指定项目位置。该属性值的以单元格的排列形式为基础，每行对应一个字符串，字符串中的每个小字符串对应一个单元格，也对应着生成的区域名。

​ 如果想要定义多个单元格为一个区域，则只需要将想要合并的单元格对应的区域名设置相同即可，但前提是：想要合并的单元格之间需要相互接触连接。

​ 如果某个单元格不需要被划分到任何区域，则只需要在该单元格对应的位置使用来作为区域名即可。

​ 还有要注意的一点是：区域的命名会影响到网格线的命名，每个区域的起始网格线（垂直、水平）会自动命名为，终止网格线（垂直、水平）自动命名为。例如：区域名为，则起始的水平网格线和垂直网格线叫做，终止的水平网格线和垂直网格线叫做。

8、gride-auto-flow

​ 该属性用于这是网格布局的项目排列顺序，默认值为，即排列顺序为按行排列，就是从左到右先排满第一行，然后再从左到右开始排第二行，依次排列。该属性值有：

• ：即排列顺序为按列排列，就是从上到下先排满第一列，然后再从上到下开始排第二列，依次排列。

页面效果：

• ：用于设置在部分项目指定位置后，剩余项目的的排列顺序为按行排列，即在排除掉指定项目位置的空间后，剩余项目依次从左到右按行排列。

页面效果：

​ 此时因为项目1和项目2，占据了两列空间，因此，会有两个项目超出三行，排列在第四行，该行的行高取决于当前行项目中的最大高度。

• ：用于设置在部分项目指定位置后，剩余项目的的排列顺序为按列排列，即在排除掉指定项目位置的空间后，剩余项目依次从上到下按列排列。

页面效果：

​ 此时因为，项目1和项目2占据了两列空间，所有会有两个项目超出三列，出现在第四列，该列的列宽取决于容器的剩余宽度。

9、justify-items

​ 该属性用于设置网格布局中，当单元格内容宽度小于单元格的宽度时，内容的水平对齐位置（左中右）。该属性值有：。

• ：将内容进行拉伸，使其占满单元格的整个宽度。
• ：内容宽度不变，左侧边框对齐单元格的左侧边缘。
• ：内容宽度不变，右侧边框对齐单元格的右侧边缘。
• ：内容宽度不变，使其在单元格内水平居中。

页面效果：

10、align-items

​ 该属性用于设置网格布局中，当单元格内容高度小于单元格的高度时，内容的垂直对齐位置（上中下）。该属性值有：

• ：将内容高度进行拉伸，使其占满单元格的整个高度。
• ：内容高度不变，上侧边框对齐单元格的上侧边缘。
• ：内容高度不变，下侧边框对齐单元格的下侧边缘。
• ：内容高度不变，使其在单元格内垂直居中。

页面效果：

11、place-items

​ 该属性是属性和属性的简写，第一个值表示单元格内容的垂直对齐位置，第二个值表示单元格内容的水平对齐位置。

​ 如果两个值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。

页面效果：

​ 同上图一致。

12、justify-content

​ 该属性用于设置网格布局中，当整个内容区域宽度小于容器的宽度时，内容区域在容器中的水平位置（左中右）。属性值有：

• ：内容区域左边框对齐容器的左边缘。
• ：内容区域右边框对齐容器的右边缘。
• ：内容区域在容器中水平居中。

页面效果：

• ：如果内容区域中存在没有设置宽度和列宽的的项目时，拉伸这些项目，使整个内容区域的宽度等于容器的宽度。
• ：使每个项目的两侧间隔均分容器水平方向剩余的空间，项目两侧的间隔相等，因此项目之间的间隔比项目与容器边缘的间隔大一倍。

页面效果：

• ：仅项目与项目之间的间隔均分容器水平方向的剩余空间，但最左和最右的项目与容器边缘之间没有间隔。

页面效果：

• ：项目与项目之间，以及项目与容器边缘之间的间隔均分容器水平方向的剩余空间。

页面效果：

13、align-content

​ 该属性用于设置网格布局中，当整个内容区域高度小于容器的高度时，内容区域在容器中的垂直位置（上中下）。属性值有：

• ：内容区域上边框对齐容器的上边缘。
• ：内容区域下边框对齐容器的下边缘。
• ：内容区域在容器中垂直居中。
• ：如果内容区域中存在没有设置高度和行高的的项目时，拉伸这些项目，使那整个内容区域的高度等于容器的高度。

页面效果：

• ：使每个项目的两侧间隔均分容器垂直方向剩余的空间，项目两侧的间隔相等，因此项目之间的间隔比项目与容器边缘的间隔大一倍。
• ：仅项目与项目之间的间隔均分容器垂直方向的剩余空间，但最左和最右的项目与容器边缘之间没有间隔。
• ：项目与项目之间，以及项目与容器边缘之间的间隔均分容器垂直方向的剩余空间。

14、place-content

​ 该属性是属性和属性的简写，第一个值表内容区域的垂直对齐位置，第二个值表示内容区域的水平对齐位置。

​ 如果两个值相同，则可以省略第二个值，只写一个值，浏览器会默认第二个值等于第一个值。

15、grid-auto-columns

​ 该属性用来设置因为项目多余或因为部分项目定位而导致浏览器自动创建的单元格的列宽是多少，用法与相同。如果不指定该属性，则浏览器会根据项目的宽度，决定当前列的列宽。

页面效果：

16、grid-auto-rows

​ 该属性用来设置因为项目多出或部分项目定位而导致浏览器自动创建的单元格的行高是多少，用法与相同。如果不指定该属性，则浏览器会根据项目的高度，决定当前行的行高。

页面效果：

17、grid-template

​ 该属性是、和这三个属性的简写形式。

​ 从代码易读性考虑，不建议使用该属性，所以这里就不过多讲述了。如想了解请查看：grid-template。

18、grid

​ 该属性是、、、 、、这六个属性的简写形式。

​ 从代码易读性考虑，不建议使用该属性，所以这里就不过多讲述了。如想了解请查看：grid。

三、项目属性

1、属性列举

​ 设置的元素，即为容器元素，容器内部的直接子元素即为项目元素，定义在项目上的相关属性，就被称为项目属性。项目属性共有10条，包含以下：

• ：定义项目左边框所对齐的垂直网格线。
• ：定义项目右边框所对齐的垂直网格线。
• ：同时定义项目左边框和右边框所对齐的网格线，是和的简写形式。
• ：定义项目上边框所对齐的水平网格线。
• ：定义项目下边框所对齐的水平网格线。
• ：同时定义项目上边框和下边框所对齐的网格线，是和的简写形式。
• ：定义项目位于哪个区域，区域由容器属性定义。
• ：定义项目在单元格区域内的水平位置（左中右），与用法一致，但效果仅限于当前项目。
• ：定义项目在单元格区域内的垂直位置（上中下），与用法一致，但效果仅限于当前项目。
• ：同时定义项目在单元格区域内的水平和垂直位置，是属性和属性的简写。

2、grid-column-start

3、grid-column-end

​ 这两个属性用于指定项目在容器内的水平定位，类似于CSS的定位，但不会脱离文档流，不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目，会出现在定位的位置，而其余普通项目，则会按照正常排序，进行排列。

​ 该属性有多个类型的值：

• ：一个关键字，表示项目按照正常排序规则，自动排列，占据1个单元格。
• ：一个是数字，可以是正数和负数，设置为则无效。正数表示项目位置从左侧第一条网格线进行计数，负数表示项目从显式定义的最后一条网格线，再往右进行扩展。正常一个项目对应一个单元格，但是通过定位可以设置项目跨多个单元格，使其占据多个单元格。

页面效果：

• ：一个名称，表示某个网格线名称，像是通过属性产生的网格线名称，或者在定义行高和列宽时定义的网格线名称。如果存在对应的网格线，则进行对齐；如果不存在对应的网格线，则会以第n+1条网格线作为起始网格线，n为项目显式定义的网格线。
• ：一个名称加一个数字，表示仅计算具有该名称的网格线，然后计数第几条网格线进行定位。
• ：一个关键字加一个数字，关键字表示跨越，后面的数字表示跨域多少个单元格，跨越的起始位置为默认位置。如果省略则默认为1，不可设置负数和0.

页面效果：

4、grid-row-start

5、grid-row-end

​ 这两个属性用于指定项目在容器内的垂直定位，类似于CSS的定位，但不会脱离文档流，不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目，会出现在定位的位置，而其余普通项目，则会按照正常排序，进行排列。

​ 该属性的属性值与、相同，有：

​ 各个属性值的效果也相同，只不过一个是定位左右边框位置，一个是定位上下边框的位置，在此就不重复讲述了。

​ 注意：如果在容器中有多个项目使用属性进行定位，导致项目之间发生重叠，此时需要属性指定项目的层级顺序，值越大，层级越高。

页面效果：

6、grid-column

7、grid-row

​ 这两条属性分别是和、和的简写形式。可以同时定义起始网格线和终止网格线，语法格式如下：

​ 属性值的类型与等相同，可以是、数字等等，例如：

​ 属性的第二个值可以省略，默认第二个值是第一个值+1，即项目只跨越一个单元格。

8、grid-area

​ 该属性用于指定项目定位在某个区域内，区域由容器属性定义，属性值为区域名。

页面效果：

​ 除了指定项目的定位区域外，该属性还可以作为、、、四条属性的简写，语法如下：

9、justify-self

​ 该属性用于上设置当前项目在单元格中的水平位置（左中右），跟属性的用法一致，但只作用于当前项目。属性值有：

• ：将内容进行拉伸，使其占满单元格的整个宽度。
• ：内容宽度不变，左侧边框对齐单元格的左侧边缘。
• ：内容宽度不变，右侧边框对齐单元格的右侧边缘。
• ：内容宽度不变，使其在单元格内水平居中。

10、align-self

​ 该属性用于上设置当前项目在单元格中的垂直位置（上中下），跟属性的用法一致，但只作用于当前项目。

• ：将内容进行拉伸，使其占满单元格的整个高度。
• ：内容高度不变，上侧边框对齐单元格的上侧边缘。
• ：内容高度不变，下侧边框对齐单元格的下侧边缘。
• ：内容高度不变，使其在单元格内垂直居中。

页面效果：

11、place-self

​ 该属性是属性和属性的简写形式，语法格式如下：

​ 如果两个属性值相等，则可以省略第二个值，浏览器默认等于第一个值。

四、参考资料

阮一峰的CSS Grid教程

MDN Grid文档

到此这篇grid布局显示网格线（grid 布局）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/82180.html