CSS grid-row-end属性

CSS的网格布局（Grid layout）允许将内容划分为行和列，从而使得布局设计更灵活。grid-row-end属性用于设置网格中单元格最后一行的位置。

语法

grid-row-end: <line>|<name>|span <value>|span <value> [ / <line-name> ] | auto

• <line>：表示网格的行线编号，可以是正数、负数或零。如果是负数，-1代表最后一行、-2代表倒数第二行，以此类推。
• <name>：表示命名网格线的名称。
• span <value>：表示跨越多少行。
• [ / <line-name> ]：可省略，用于定义一个断线，使得跨越的内容可以沿着断线包裹。
• auto：默认值，表示与起始行对齐或占据一行。

属性值

1. <line>

grid-row-end属性可以设置具体的行线数字。在一个网格容器中，行从上至下按照一定顺序递增。如果行线设置为一个正整数，代表结束位置的单元格将出现在该行的下方。如果行线设置为一个负整数，则倒数第几行的下方出现结束位置的单元格。

.grid {
  display: grid;
  grid-template-rows: 100px 50px 50px;
  grid-template-columns: repeat(2, 1fr);
}

.item {
  grid-row-end: 3; /* 规定单元格的结束位置为第三行 */
}

2. <name>

除了<line>以外，还可以使用<name>来表示一条被命名的行线。可以使用grid-template-rows属性来指定网格的哪个行被命名，然后使用这个命名指定行的名称（字符串）来设置grid-row-end。命名网格线可以更容易地维护代码，因为我们可以在网格容器的样式表中定义多个命名的行线。

.grid {
  display: grid;
  grid-template-rows: [row1] 100px [row2] 50px [row3] 50px [row4];
  grid-template-columns: repeat(2, 1fr);
}

.item {
  grid-row-end: row3;
}

3. span <value>

<value>是一个整数，表示要跨越的行数。这种方法比显式地指定网格行要更方便和适用，因为它们可以节省大量的可读性高的代码。例如，如果一个单元格跨越了两行，只需要简单地添加span 2值。

.grid {
  display: grid;
  grid-template-rows: 100px 50px 50px;
  grid-template-columns: repeat(2, 1fr);
}

.item {
  grid-row-end: span 2; /* 规定单元格跨越两行 */
}

4. span <value> / <line-name>

这种方法可以在<value>后面加一个斜线和断点名称来让内容从断点处溢出，从而可以控制跨多列的单元格行为。下面的例子中,单元格从第一行开始,跨越两行。在第三行的row3断点处被分割并跨越第四行，总共跨越了三行。

.grid {
  display: grid;
  grid-template-rows: [row1] 100px [row2] 50px [row3] 50px [row4];
  grid-template-columns: repeat(2, 1fr);
}

.item {
  grid-row-end: span 2 / row3; /* 规定单元格跨越两行并折到第三行 */
}

总结

grid-row-end属性可以设置单元格的最后行位置，范围从网格容器定义的第一行到最后一行。这个属性非常适合于控制网格布局中单元格的位置及跨度。我们可以使用数字、命名或断点来设置单元格的行位置。同时，使用span关键字可以让单元格跨越指定个数的行；使用斜杠和断点名称可以让单元格在指定位置或断口处折断继续。