#grid-column-end

#介绍

在网格布局中，指定网格项目列结束位置或指定网格项目在列方向的跨度。此属性作用在网格项目上。

“网格线”（grid line）初始计数为 1：

• 数值为正数表示从网格起点开始往正数方向偏移 (n-1) 个单位。
• 数值为负数时表示显式网格结束点往负数方向偏移 (n-1) 个单位。
• 不支持值为 0。

可与 grid-column-start 配合指定子元件在列方向的跨度。

当网格项目同时指定了 grid-column-start 和 grid-column-end 时，grid-column-span 属性失效。

当同时设置了 grid-column-start 和 grid-column-end，且 grid-column-start 比 grid-column-end 更靠后时，会交换这个属性的值，表现与 Web 一致。

当在 grid-column-end 中使用带有 span 关键字的值时，不能同时使用 grid-column-span 属性，否则会出现不符合预期的行为。

#使用示例

css-apisrc/grid-column-end/App.tsx

预览

#语法

/* <number> values */
grid-column-end: 1;
grid-column-end: 2;

/* span <number> values*/
grid-column-end: span 1;

#取值

• auto

  默认值。表示该属性对网格项目的放置没有任何影响，自动放置、自动跨度或默认跨度为 1。

• <number>

  <number> 代表整数，可以为负数。表示网格项目在列方向上的结束位置。数值为负数时表示显式网格结束点往负数方向偏移 (n-1) 个单位。不支持 0。

• span && <number>

  span <number>; 格式表示网格项目列方向的跨度，与 grid-column-span 等价。

#形式定义

#形式语法

grid-column-end = <number> | [span && <number>]

#与 Web 的区别

• 不支持 <custom-ident>、span && <custom-ident>、<integer> && <custom-ident>?；

#兼容性

#常见问题

• 当网格项目同时指定了 grid-column-start 和 grid-column-end 时，grid-column-span 属性失效。

• 当在 grid-column-end 中使用带有 span 关键字的值时，不能同时使用 grid-column-span 属性，否则会出现不符合预期的行为。