grid-column-start

Baseline 已廣泛支援

此功能已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來，它已在各大瀏覽器中可用。

grid-column-start 是一個 CSS 屬性，它透過為網格專案的網格放置貢獻一條線、一個跨度或不貢獻任何內容（自動），來指定網格專案在網格列中的起始位置。此起始位置定義了網格區域的塊級起始邊緣。

試一試

grid-column-start: auto;

grid-column-start: 2;

grid-column-start: -1;

grid-column-start: 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 value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: some-grid-area;

/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: some-grid-area 4;

/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span some-grid-area;
grid-column-start: span some-grid-area 5;

/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: unset;

此屬性被指定為單個 <grid-line> 值。一個 <grid-line> 值可以指定為：

要麼是 auto 關鍵字
要麼是 <custom-ident> 值
要麼是 <integer> 值
要麼是 <custom-ident> 和 <integer>，兩者用空格分隔
要麼是關鍵字 span 以及 <custom-ident> 或 <integer>，或兩者都有。

值

auto

一個關鍵字，表示該屬性對網格專案的放置沒有任何貢獻，表示自動放置、自動跨度或預設跨度為 1。

<custom-ident>

如果存在一個名為 <custom-ident>-start 的命名線，它將該命名線的第一條貢獻給網格專案的放置。

注意： 命名網格區域會自動生成此形式的隱式命名線，因此指定 grid-column-start: foo; 將選擇該命名網格區域的起始邊緣（除非在此之前明確指定了另一條名為 foo-start 的線）。

否則，這將被視為指定了整數 1 和 <custom-ident>。

<integer> && <custom-ident>?

貢獻第 n 條網格線到網格專案的放置。如果給出負整數，則從顯式網格的末尾邊緣開始反向計數。

如果以 <custom-ident> 形式給出名稱，則只計算具有該名稱的線。如果具有該名稱的線不足，則為了查詢此位置，所有隱式網格線都被假定具有該名稱。

<integer> 值 0 是無效的。

span && [ <integer> || <custom-ident> ]

貢獻一個網格跨度到網格專案的放置，使得網格專案網格區域的列起始邊緣與結束邊緣相距 n 條線。

如果以 <custom-ident> 形式給出名稱，則只計算具有該名稱的線。如果具有該名稱的線不足，則為了計算此跨度，顯式網格上與搜尋方向對應的所有隱式網格線都被假定具有該名稱。

如果省略了 <integer>，則預設為 1。負整數和 0 是無效的。

<custom-ident> 不能取 span 和 auto 值。

正式定義

初始值	`auto`
應用於	網格專案和包含塊是網格容器的絕對定位框
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

grid-column-start = 
  <grid-line>  

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

示例

設定網格專案的列起始位置

HTML

html

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}

結果

規範

規範
CSS 網格佈局模組 Level 2 # line-placement

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者上次修改於 2025 年 7 月 14 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題