--- title: grid-column slug: Web/CSS/grid-column translation_of: Web/CSS/grid-column ---

grid-column CSS属性是 {{cssxref("grid-column-start")}} 和 {{cssxref("grid-column-end")}} 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 {{glossary("grid area","grid area","网格区域")}}。

{{EmbedInteractiveExample("pages/css/grid-column.html")}}

语法

如果给出两个<grid-line>值，它们之间用“ /”分隔。 将grid-column-start的正手设置为斜线之前的值，并将grid-column-end的正手设置为斜线之后的值。

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

值


auto


是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为1。


<custom-ident>


如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。

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

否则，将其视为与<custom-ident>一起指定了整数1。


<integer> && <custom-ident>?


将第n条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

{{cssxref("integer")}}的值为0无效。

span && [ <integer> || <custom-ident> ]
将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘n行。
如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

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

Formal syntax

{{csssyntax}}

示例

HTML Content

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

CSS Content

#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;
}

{{EmbedLiveSample("Example", "100%", "100px")}}

IE问题

IE11不支持自动放置网格项目。 除非用-ms-{{cssxref("grid-column")}}和-ms-{{cssxref("grid-row")}}显式注释，否则所有项目都以网格的第一行/列结尾。 可以使用一些JavaScript来启用自动注释：源存储库。

规范

Specification Status Comment
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}} {{Spec2("CSS3 Grid")}} Initial definition

{{cssinfo}}

浏览器兼容性

{{Compat("css.properties.grid-column")}}

参见