Added in v5.1 View on GitHub

CSS Grid

了解如何透過範例和程式碼片段來啟用、使用和自訂我們建立在 CSS Grid 上的替代版面配置系統。

本頁內容

Bootstrap 的預設格線系統代表了超過十年的 CSS 版面配置技術的成果，經過數百萬人的嘗試和測試。但是，它的建立並沒有使用許多我們在瀏覽器中看到的現代 CSS 功能和技術，例如新的 CSS Grid。

請注意——我們的 CSS Grid 系統從 v5.1.0 開始是實驗性的並且需要選擇加入！ 我們在文件的 CSS 中包含它來為您展示，但預設是停用的。繼續閱讀以了解如何在您的專案中啟用它。

運作原理（How it works）

在 Bootstrap 5 中，我們加入了啟用一個建立在 CSS Grid 上的獨立格線系統的選項，但具有 Bootstrap 的特色。您仍然可以隨意套用類別來建立響應式版面配置，但底層使用不同的方法。

CSS Grid 是選擇加入的。 透過設定 $enable-grid-classes: false 來停用預設格線系統，並透過設定 $enable-cssgrid: true 來啟用 CSS Grid。然後，重新編譯您的 Sass。
將 .row 的實例替換為 .grid。 .grid 類別設定 display: grid 並建立一個 grid-template，您可以使用 HTML 在其上建構。
將 .col-* 類別替換為 .g-col-* 類別。 這是因為我們的 CSS Grid 欄使用 grid-column 屬性而非 width。
欄和間隔大小透過 CSS 變數設定。 在父層 .grid 上設定這些，並使用 --bs-columns 和 --bs-gap 以行內樣式或樣式表的方式進行任意自訂。

在未來，Bootstrap 很可能會轉向混合解決方案，因為 gap 屬性已經在 Flexbox 上獲得幾乎完全的瀏覽器支援。

主要差異（Key differences）

與預設格線系統相比：

Flexbox 通用類別不會以相同方式影響 CSS Grid 欄。
間隙取代間隔。gap 屬性取代我們預設格線系統中的水平 padding，功能更像 margin。
因此，與 .row 不同，.grid 沒有負外距，外距通用類別無法用於更改格線間隔。格線間隙預設在水平和垂直方向都會套用。詳情請參閱自訂部分。
行內樣式和自訂樣式應視為修飾類別的替代品（例如 style="--bs-columns: 3;" 對比 class="row-cols-3"）。
巢狀的運作方式類似，但可能需要您在每個巢狀 .grid 實例上重設欄數。詳情請參閱巢狀部分。

範例（Examples）

三欄（Three columns）

可以使用 .g-col-4 類別在所有視窗和裝置上建立三個等寬欄。加入響應式類別以根據視窗大小更改版面配置。

.g-col-4

html

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

響應式（Responsive）

使用響應式類別在不同視窗間調整您的版面配置。這裡我們在最窄的視窗上從兩欄開始，然後在中型視窗及以上增長到三欄。

.g-col-6 .g-col-md-4

html

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

將其與所有視窗上的這個兩欄版面配置進行比較。

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

換行（Wrapping）

當水平方向沒有更多空間時，格線項目會自動換到下一行。請注意，gap 適用於格線項目之間的水平和垂直間隙。

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

起始位置（Starts）

起始類別旨在取代我們預設格線的偏移類別，但它們並不完全相同。CSS Grid 透過樣式建立格線範本，告訴瀏覽器「從這個欄開始」和「在這個欄結束」。這些屬性是 grid-column-start 和 grid-column-end。起始類別是前者的簡寫。將它們與欄類別配對，以根據需要調整欄的大小和對齊。起始類別從 1 開始，因為 0 對這些屬性是無效值。

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

自動欄（Auto columns）

當格線項目（.grid 的直接子元素）上沒有類別時，每個格線項目將自動調整為一欄。

html

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

此行為可以與格線欄類別混合使用。

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

巢狀（Nesting）

與我們的預設格線系統類似，我們的 CSS Grid 允許輕鬆巢狀 .grid。但是，與預設不同的是，此格線會繼承列、欄和間隙的變更。考慮以下範例：

我們使用本地 CSS 變數覆寫預設欄數：--bs-columns: 3。
在第一個自動欄中，欄數被繼承，每個欄是可用寬度的三分之一。
在第二個自動欄中，我們將巢狀 .grid 上的欄數重設為 12（我們的預設值）。
第三個自動欄沒有巢狀內容。

在實際應用中，與我們的預設格線系統相比，這允許更複雜和自訂的版面配置。

First auto-column

Auto-column

Second auto-column

6 of 12

4 of 12

2 of 12

Third auto-column

html

<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

自訂（Customizing）

使用本地 CSS 變數自訂欄數、列數和間隙寬度。

變數	備援值	說明
`--bs-rows`	`1`	格線範本中的列數
`--bs-columns`	`12`	格線範本中的欄數
`--bs-gap`	`1.5rem`	欄之間的間隙大小（垂直和水平）

這些 CSS 變數沒有預設值；相反，它們會套用備援值，這些備援值會被使用_直到_提供本地實例為止。例如，我們對 CSS Grid 列使用 var(--bs-rows, 1)，它會忽略 --bs-rows，因為它還沒有在任何地方設定。一旦設定，.grid 實例將使用該值而非備援值 1。

無格線類別（No grid classes）

.grid 的直接子元素是格線項目，因此它們會在不明確加入 .g-col 類別的情況下調整大小。

Auto-column

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

欄和間隙（Columns and gaps）

調整欄數和間隙。

.g-col-2

html

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

.g-col-6

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

加入列（Adding rows）

加入更多列並更改欄的位置：

Auto-column

html

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

間隙（Gaps）

僅透過修改 row-gap 來更改垂直間隙。請注意，我們在 .grid 上使用 gap，但可以根據需要修改 row-gap 和 column-gap。

.g-col-6

html

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

因此，您可以有不同的垂直和水平 gap，它可以接受單一值（所有邊）或一對值（垂直和水平）。這可以透過 gap 的行內樣式或我們的 --bs-gap CSS 變數來套用。

.g-col-6

html

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

CSS Grid 的一個限制是我們的預設類別仍然由兩個 Sass 變數 $grid-columns 和 $grid-gutter-width 生成。這實際上預先決定了在我們編譯的 CSS 中生成的類別數量。您有兩個選項：

修改那些預設 Sass 變數並重新編譯您的 CSS。
使用行內樣式或自訂樣式來擴充提供的類別。

例如，您可以增加欄數並更改間隙大小，然後使用行內樣式和預先定義的 CSS Grid 欄類別（例如 .g-col-4）的組合來調整您的「欄」大小。

14 columns

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>