网格列 | grid-column (Grid Layout)

  CSS 中文开发手册

网格列 | grid-column (Grid Layout) - CSS 中文开发手册

grid-column是grid-column-start和grid-column-end的一个速记属性指定内的网格项的大小和位置网格行通过贡献一条线，一个跨度，或全无（自动），以它的网格位置，从而指定的直列开始和直列端部边缘其网格面积。

/* 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: unset;

如果两个<grid-line>值，则grid-column-start将Longhand设置为斜杠之前的值，grid-column-endLonghand设置为斜杠后的值。

初始值	as each of the properties of the shorthand: grid-column-start: auto grid-column-end: auto
应用于	grid items and absolutely-positioned boxes whose containing block is a grid container
是否继承	no
适用媒体	visual
计算值	as each of the properties of the shorthand: grid-column-start: as specified grid-column-end: as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

grid-column-start*autogrid-column-end*auto

Applies to grid items and absolutely-positioned boxes whose containing block is a grid container   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

grid-column-start*具体规定grid-column-end*具体规定

Animation type discrete   Canonical order the unique non-ambiguous order defined by the formal grammar  

语法

此属性指定为一两项。<grid-line>价值。如果两个<grid-line>值由“/”分隔。

各<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-line> [ / <grid-line> ]?where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

例

HTML内容

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

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

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-column' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	57.01	52.0 (52.0)2	10.0-ms3	20-ms3	444	10.1

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.01	57.01	52.0 (52.0)2	10.0-ms3	44	No support

  CSS 中文开发手册

  本文标题：网格列 | grid-column (Grid Layout) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32181.html