网格线 (Grid Lines)

网格线实际上是代表线的开始、结束,两者之间就是网格列或行。

每条线是从网格轨道开始,网格的网格线从1开始,每条网格线逐步增加1。

网格线包括:

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

如上,创建了个两列三行的网格,包括三条列网格线和四条行网格线。item1 就是由行和列的号码重新定位。

如果一个网格项目跨度只有一行或一列,那么 grid-row-endgrid-column-end 不是必需的。

grid-row 和 grid-column

grid-rowgrid-row-startgrid-row-end 的组合属性

如上面 item1 的属性可以设置为:

grid-row: 2 / 3;

grid-columngrid-column-startgrid-column-end 的组合属性

如上面 item1 的属性可以设置为:

grid-column: 2 / 3;

grid-rowgrid-column 的设置规则:

  • 如果只提供一个值,他指定了grid-row-start和grid-column-start的值。
  • 如果提供两个值,第一个值是grid-row-start、grid-column-start的值,第二个值是grid-row-end、grid-column-end的值,两者之间必须要用/隔开。

跨行跨列 (grid-area)

默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列。著作权归作者所有。

可以通过设置 grid-column-endgrid-column-start 距离多个网络线号实现多个列跨越,通过 grid-row-endgrid-row-start 距离多个网格号实现多个行跨越。

grid-areagrid-row-startgrid-column-startgrid-row-endgrid-column-end 的简写

比如

grid-area: 2 / 2 / 5 / 4;
// 同
grid-row: 2 / 5;
grid-column: 2 / 4;
// 同
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 5;
grid-column-end: 4;

设置了一个跨越三行两列的网格项目

1
2
3
4
5
6
7

使用关键词 span 后面紧随数字,表示合并多少个列或行:

grid-row: 2 / span 3;
grid-column: span 2;

上面的示例,表示从第二行开始,合并之后的3行,从第一列来时,合并之后的2列。

1
2
3
4
5
6
7

网格线命名

通过 grid-template-rows 和 grid-template-columns 定义网格时,网格线可以被命名。网格线名称也可以设置网格项目位置,并用来定位网格项目的位置。

分配网格线名称必须用方括号 [网格线名称],然后后面紧跟网格轨道的尺寸值。定义网格线名称时需要避免使用规范中出现的关键词,以免导致混乱。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

可以在方括号中添加多个名称来命名网格线名称,使用多外名称命名网格线名称时,名称间要用空格隔开。

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

通过网格线名称设置网格项目位置

使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似。

grid-row-start:    row-2-start;
grid-row-end:      row-end;
grid-column-start: col-2-start;
grid-column-end:   col-end;

grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;

引用网格线名称的时候不应该带方括号。

使用相同的名称命名网格线和设置网格项目位置

使用repeat()函数可以给网格线分配相同的名称。这可以节省一定的时间。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

使用repeat()函数可以给网格线命名,这也导致多个网格线具有相同的网格线名称。

相同网格线名称指定网格线的位置和名称,也且会自动在网格线名称后面添加对应的数字,使其网格线名称也是唯一的标识符。

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开。

在这个示例中,item1放置位置是row-start第2条开始,至row-end的第3条结束,这用来设置item1在行的起始和结束位置;col-start的第1条开始,至col-start的第3条结束(col-start的第3条也对应的是col-end的第2条),用来设置item1在列的起始位置和结束位置。

网格线负值

网格线可以使用负值,表示从右向左的顺序。

比如:

grid-row: 1 / -2;
grid-column: 1 / -2;
1
2
3
4
5
6
7

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress