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設定為斜槓後的值。

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

規範

瀏覽器相容性

  CSS 中文開發手冊