grid-column
grid-column CSS 簡寫屬性，透過指定網格線、跨度或不指定（自動）來確定其網格位置，從而指定其網格區域的行內起始和行內結束邊緣，以指定網格項在網格列中的尺寸和位置。
試一試
grid-column: 1;
grid-column: 1 / 3;
grid-column: 2 / -1;
grid-column: 1 / span 2;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">One</div>
<div>Two</div>
<div>Three</div>
</div>
</section>
.example-container {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
}
.example-container > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
}
#example-element {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
/* Keyword values */
grid-column: auto;
grid-column: auto / auto;
/* <custom-ident> values */
grid-column: some-grid-area;
grid-column: some-grid-area / some-other-grid-area;
/* <integer> + <custom-ident> values */
grid-column: some-grid-area 4;
grid-column: 4 some-grid-area / 6;
/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span some-grid-area;
grid-column: 5 some-grid-area span;
grid-column: span 3 / 6;
grid-column: span some-grid-area / span some-other-grid-area;
grid-column: 5 some-grid-area 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
<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 網格佈局模組 Level 2 # placement-shorthands |
瀏覽器相容性
載入中…