使用基於線的定位的網格佈局

在網格佈局的基本概念指南中，我們簡要了解了如何使用行號在網格上定位專案。在本指南中，我們將全面探討此規範的基本功能如何工作。

從編號的行開始探索網格是最合乎邏輯的起點，因為當您使用網格佈局時，您始終擁有編號的行。行按列和行編號，並從1開始索引。請注意，網格是根據文件的書寫模式進行索引的。在從左到右的語言中，例如英語，第 1 行位於網格的左側。如果您正在使用從右到左的語言，例如阿拉伯語，則第 1 行將位於網格的右側。我們將在網格、邏輯值和書寫模式指南中瞭解更多關於書寫模式與網格之間互動的資訊。

一個基本示例

作為一個基本示例，我們建立一個具有 3 列軌道和 3 行軌道的網格。這使我們在每個維度上都有 4 條線。

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

css

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

在我們的網格容器中，我們包含四個子元素。

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>

如果我們不以任何方式將它們放置在網格上，它們將根據自動放置規則進行佈局，每個專案佔據前四個單元格中的一個。您可以使用瀏覽器開發工具檢查網格，以檢視網格如何定義列和行。

The example grid highlighted in DevTools

透過行號定位專案

我們可以使用基於線的放置來控制這些專案在網格上的位置。我們可以使用 grid-column-start 和 grid-column-end 屬性使第一個專案從網格的最左側開始並跨越一個列軌道。使用 grid-row-start 和 grid-row-end，我們使專案從網格頂部的第一行線開始，並跨越到第四行線。

css

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

當您放置一些專案時，網格上的其他專案將繼續使用自動放置規則進行佈局。此行為在網格佈局中的自動放置指南中解釋。現在，請觀察網格如何將未放置的專案佈局到網格的空單元格中。

使用相同的屬性但使用不同的值單獨處理每個專案，我們放置所有四個專案，跨越行和列軌道。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

請注意，如果需要，我們可以將單元格留空。網格佈局的優點之一是能夠在我們的設計中擁有空白而無需任何技巧。

`grid-column` 和 `grid-row` 簡寫

上一個示例為了定位每個專案，程式碼量相當大。毫無疑問，您應該知道存在一種簡寫。grid-column-start 和 grid-column-end 屬性可以合併為 grid-column，grid-row-start 和 grid-row-end 可以合併為 grid-row。在此示例中，我們使用這些簡寫屬性複製了上面的示例

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

預設跨度

在上面的示例中，為了演示這些屬性，我們指定了每一行的起始線和結束線，但是實際上，如果一個專案只跨越一個軌道，您可以省略 grid-column-end 或 grid-row-end 值。Grid 預設跨越一個軌道。

使用長格式放置的預設跨度

這意味著我們最初的長格式示例將如下所示

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}

使用簡寫放置的預設跨度

我們的簡寫程式碼如下所示，對於僅跨越一個軌道的專案，沒有正斜槓和第二個值。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}

`grid-area` 屬性

我們可以更進一步，用一個屬性定義每個區域——grid-area。grid-area 的值順序如下。

– grid-row-start – grid-column-start – grid-row-end – grid-column-end

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
.box2 {
  grid-area: 1 / 3 / 3 / 4;
}
.box3 {
  grid-area: 1 / 2 / 2 / 3;
}
.box4 {
  grid-area: 3 / 2 / 4 / 4;
}

grid-area 的值順序可能看起來有點奇怪——例如，它與我們指定 margin 和 padding 的簡寫方向相反。這可能是因為 CSS 網格佈局使用 CSS 書寫模式中定義的流相對方向。我們將在網格、邏輯值和書寫模式中探討網格如何與書寫模式一起工作。目前，請考慮四個流相對方向的概念

block-start
block-end
inline-start
inline-end

我們使用的是英語，一種從左到右的語言。我們的 block-start 是網格容器的頂行線，block-end 是容器的最後一行線。我們的 inline-start 是左列線，因為 inline-start 始終是當前書寫模式下文字開始寫入的點，而 inline-end 是我們網格的最後一列線。

當我們使用 grid-area 屬性指定網格區域時，我們首先定義起始行 block-start 和 inline-start，然後定義結束行 block-end 和 inline-end。這最初看起來很奇怪，因為我們習慣了 top、right、bottom 和 left 的物理屬性，但如果您開始將網站視為在不同書寫模式下多方向的，它會更有意義。

倒數

我們還可以從網格的塊和內聯末端向後計數，對於英語，這將是右側列線和最後一行線。顯式網格的最後一行可以表示為 -1，您可以從那裡倒數——所以倒數第二行是 -2。

請注意，負值僅與顯式網格相關。最後一行是由 grid-template-columns 和 grid-template-rows 定義的網格的最後一行，並且不考慮在 _隱式網格_ 中新增的任何行或列。

在下一個示例中，我們透過從網格的右側和底部放置專案來翻轉我們正在使用的佈局。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}
.box2 {
  grid-column-start: -3;
  grid-column-end: -4;
  grid-row-start: -1;
  grid-row-end: -3;
}
.box3 {
  grid-column-start: -2;
  grid-column-end: -3;
  grid-row-start: -1;
  grid-row-end: -2;
}
.box4 {
  grid-column-start: -2;
  grid-column-end: -4;
  grid-row-start: -3;
  grid-row-end: -4;
}

跨網格拉伸專案

能夠定址網格的起始線和結束線很有用，因為您可以這樣將專案一直拉伸到網格

css

.item {
  grid-column: 1 / -1;
}

間隙或小巷

CSS 網格包括透過 column-gap 和 row-gap 屬性或 gap 簡寫在列和行軌道之間新增間隙的功能。

間隙只出現在網格軌道之間，它們不會在容器的頂部和底部、左側或右側新增空間。我們可以透過在網格容器上使用這些屬性來為我們之前的示例新增間隙。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 1em;
}

間隙簡寫

這兩個屬性也可以用簡寫形式 gap 表示。如果您只為 gap 提供一個值，它將同時應用於列間隙和行間隙。如果您指定兩個值，則第一個值用於 row-gap，第二個值用於 column-gap。

css

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

就專案的基於線的定位而言，間隙的作用就像該線獲得了額外的寬度。任何從該線開始的事物都在間隙之後開始，並且您無法定址間隙或將任何東西放置到其中。如果您想要更像常規軌道那樣的間隙，您可以為此目的定義一個軌道。

使用 `span` 關鍵字

除了透過數字指定起始線和結束線外，您還可以指定起始線，然後使用 span 關鍵字指定您希望區域跨越的軌道數量。

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

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>

css

.box1 {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2;
  grid-row: 3;
}

您還可以在 grid-row-start/grid-row-end 和 grid-column-start/grid-column-end 的值中使用 span 關鍵字。以下兩個示例將建立相同的網格區域。在第一個示例中，我們設定了起始行線，然後指定了我們希望區域覆蓋 3 條軌道。該區域將從第 1 行開始，並在從第 1 行算起的 3 條線處結束；也就是說，該區域將在第 4 行結束。

css

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

在第二個示例中，我們指定了我們希望專案結束的結束行線，然後將起始線設定為 span 3。這意味著專案將需要從指定的行線向上跨越。該區域將從第 4 行開始，並跨越 3 行到第 1 行。

css

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

為了熟悉網格中基於線的定位，請嘗試透過將專案放置到具有不同列數的網格上來構建一些常見佈局。請記住，如果您不放置所有專案，任何剩餘的專案將根據自動放置規則進行放置。這可能會產生您想要的佈局，但如果某些東西出現在意想不到的位置，請檢查您是否已為其設定了位置。

此外，請記住，當您像這樣明確放置專案時，網格上的專案可能會重疊。重疊的專案可以建立一些不錯的效果，但是，如果您指定了錯誤的起始線或結束線，也可能會導致不正確的重疊。在學習過程中，使用瀏覽器開發工具檢查網格對於識別此類問題非常有幫助，尤其是當您的網格相當複雜時。

幫助改進 MDN

瞭解如何貢獻

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

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