grid-column

基线 广泛可用

此功能非常成熟，可以在许多设备和浏览器版本上运行。它已在所有浏览器中可用，自 2020 年 7 月.

**grid-column** CSS 简写属性通过贡献一行、一个跨度或没有（自动）到网格放置，从而指定网格项目在网格列中的大小和位置，从而指定其网格区域的内联开始和内联结束边缘。

试一试

组成属性

此属性是以下 CSS 属性的简写

语法

css
/* Keyword values */
grid-column: auto;
grid-column: auto / auto;

/* <custom-ident> values */
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/* <integer> + <custom-ident> values */
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

/* Global values */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

此属性被指定为一个或两个 <grid-line> 值。

如果给出了两个 <grid-line> 值，它们用 / 分隔。grid-column-start 扩展设置为斜杠之前的值，而 grid-column-end 扩展设置为斜杠之后的值。

每个 <grid-line> 值都可以指定为

  • auto 关键字
  • 或 <custom-ident> 值
  • 或 <integer> 值
  • 或 <custom-ident> 和 <integer> 同时使用，用空格分隔
  • 或 span 关键字与 <custom-ident> 或 <integer> 或两者同时使用。

值

auto

是一个关键字，表示该属性不会对网格项目的放置产生任何影响，表示自动放置、自动跨度或默认跨度为 1。

<custom-ident>

如果存在名为 <custom-ident>-start/<custom-ident>-end 的命名行，则会将第一条这样的行贡献给网格项目的放置。

**注意：**命名的网格区域会自动生成这种形式的隐式命名行，因此指定 grid-column: foo; 会选择该命名网格区域的开始/结束边缘（除非之前显式指定了名为 foo-start/foo-end 的其他行）。

否则，这将被视为指定了整数 1 以及 <custom-ident>。

<integer> && <custom-ident>?

将第 n 个网格线贡献给网格项目的放置。如果给定负整数，则会反向计数，从显式网格的结束边缘开始。

如果将名称作为 <custom-ident> 给出，则仅计算具有该名称的行。如果存在不足以计算此位置的具有该名称的行，则假设所有隐式网格线都具有该名称。

<integer> 值为 0 是无效的。

span && [ <integer> || <custom-ident> ]

将网格跨度贡献给网格项目的放置，使得网格项目网格区域的相应边缘距相对边缘 n 行。

如果将名称作为 <custom-ident> 给出，则仅计算具有该名称的行。如果存在不足以计算此跨度的具有该名称的行，则假设对应于搜索方向的显式网格侧面的所有隐式网格线都具有该名称。

如果省略了 <integer>，则默认为 1。负整数或 0 是无效的。

正式定义

初始值与简写的每个属性相同
应用于网格项目和包含块为网格容器的绝对定位盒子
继承否
计算值与简写的每个属性相同
动画类型离散

正式语法

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

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

示例

设置网格列的大小和位置

HTML

html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

结果

规范

规范
CSS 网格布局模块 Level 2
# placement-shorthands

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅