CSS | grid-row-end 属性

简介

grid-row-end 属性用于定义一个网格项目结束的行位置。

语法

grid-row-end: <line | auto | span>;

• <line>：表示网格线的名称或数字，用于定位项目网格行结束位置。
• auto：默认值，表示由网格容器自行决定选定项目的行结束位置。
• span <number>：表示网格项目跨越的行数。

示例

使用行名称

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  grid-row-end: row3-end; /* 该项目结束于第三行 */
}

使用行编号

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  grid-row-end: 2; /* 该项目结束于第二行 */
}

使用 span 属性

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  grid-row-end: span 2; /* 该项目跨越 2 行 */
}

注意事项

• grid-row-start 和 grid-row-end 需要成对使用，用于定义网格项目的位置和大小。
• 如果省略 grid-row-start 但为 grid-row-end 指定值，那么 grid-row-start 会默认设置为 auto。

浏览器支持度

该属性的浏览器支持度如下：

• Chrome：56+
• Edge：16+
• Firefox：52+
• Safari：10.1+
• Opera：43+

注：请注意不要使用过期的浏览器，以确保您的网页在更多用户的设备上能够发挥作用。