#grid-column

#介绍

在网格布局中，grid-column 是一个简写属性，用于同时指定网格项目列方向的开始位置和结束位置。它相当于同时设置 grid-column-start 和 grid-column-end 两个属性。

#使用示例

#语法

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

/* span <number> 值 */
grid-column: span 2;
grid-column: span 2 / 4;
grid-column: 1 / span 3;

#取值

• auto

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

• <number>

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

• span <number>

  span <number> 格式表示网格项目列方向的跨度。

#形式定义

#形式语法

grid-column =
  <grid-line> [ / <grid-line> ]?

<grid-line> =
  <number>       |
  span <number>

#与 Web 的区别

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

#兼容性

#常见问题

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

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