grid-row-end

Baseline 已廣泛支援

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

grid-row-end CSS 屬性透過為網格放置貢獻一條線、一個跨度或不貢獻任何東西（自動），來指定網格項在網格行中的結束位置，從而指定其網格區域的行內結束邊緣。

試一試

grid-row-end: auto;

grid-row-end: 3;

grid-row-end: -1;

grid-row-end: span 3;

<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-row-end: auto;

/* <custom-ident> values */
grid-row-end: some-grid-area;

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

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

/* Global values */
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: revert;
grid-row-end: revert-layer;
grid-row-end: unset;

值

auto

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

<custom-ident>

如果存在名稱為“<custom-ident>-end”的命名線，它將貢獻第一條這樣的線到網格項的放置。

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

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

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

<integer> && <custom-ident>?

將第 n 條網格線貢獻給網格項的放置。如果給出負整數，它會反向計數，從顯式網格的結束邊緣開始。

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

<integer> 值 0 是無效的。

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

為網格項的放置貢獻一個網格跨度，使得網格項的網格區域的行結束邊緣距離起始邊緣有 n 條線。

如果給定了一個名稱作為 <custom-ident>，則只計算具有該名稱的線。如果具有該名稱的線不足，則為了計算此跨度，顯式網格在與搜尋方向相對應的側面的所有隱式網格線都假定具有該名稱。

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

正式定義

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

正式語法

grid-row-end = 
  <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 上檢視此頁面 • 報告此內容存在的問題