grid-column

翻译不完整。 请帮助我们翻译这篇文章!

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

语法

如果给出两个<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>-start"的命名行,则它将第一行添加到网格项目的位置。

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

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


<integer> && <custom-ident>?


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

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

integer的值为0无效。

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

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

Formal syntax

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

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

示例

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

IE问题

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

规范

Specification Status Comment
CSS Grid Layout
grid-column
Candidate Recommendation Initial definition
初始值as each of the properties of the shorthand:
适用元素grid items and absolutely-positioned boxes whose containing block is a grid container
是否是继承属性
计算值as each of the properties of the shorthand:
Animation typediscrete

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grid-columnChrome Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16Firefox Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44
Full support 44
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 57
Full support 57
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Full support 52
Full support 52
No support 40 — 59
Disabled
Disabled From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 43
Full support 43
Full support 28
Disabled
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Full support 10.3Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

参见