CSS | grid-column-end 属性

简介

grid-column-end 属性指定一个项目网格中结束列的位置。

它只适用于 使用 CSS 网格的父元素。 grid-column-end 表示项目跨越的网格行的起始和结束线，就像在 Word 中使用表格中的单元格的一部分或全部选项。

语法

grid-column-end: <line> | <span> | <name> | <function> ;

属性值

• <line>：指定行的名称或单元格编号。也可以指定一个数字作为网格行结束线的编号。
• <span>：定义项目将跨越多少行。
• <name>：指定网格线的自定义名称。
• <function>：允许您在属性值中使用数学表达式。

初始值

1（只允许整数）

应用样式

该属性作用于网格项的CSS。

继承性

不可继承

示例

以下示例将元素放在网格中的第一列，从第二列结束到第三列结束。

grid-column-start: 1;
grid-column-end: 3;

以下示例将元素放置在第3列和第4列之间。

grid-column-start: 3;
grid-column-end: 4;

通过使用 grid-column-end 将元素放置在父元素中的所有列中。

grid-column-start: 1;
grid-column-end: -1;

浏览器支持

grid-column-end 属性在所有主流浏览器中均可使用，包括 Chrome、Firefox、Safari、Opera 和 IE。