CSS Grid

Bootstrap 的預設網格系統代表了十多年 CSS 佈局技術的巔峰之作，經過數百萬人的嘗試和測試。 但是，它的創建也沒有我們在瀏覽器中看到的許多現代 CSS 功能和技術，例如新的 CSS 網格。

如何運作

在 Bootstrap 5 中，我們添加了一個選項來啟用一個單獨的網格系統，該系統建構在 CSS Grid 上但帶有 Bootstap twist。您仍然可以獲得可以隨心所欲使用的 class 來構建響應式佈局，但在幕後採用了不同的方法。

• CSS Grid 是可選的通過設定 $enable-grid-classes: false 禁用預設網格系統並通過設定 $enable-cssgrid: true 啟用 CSS Grid。然後重新編譯你的 Sass。

• 用 .grid 取代 .row 的例子。 .grid class 設定 display: grid 並創建一個使用 HTML 建構的 grid-template。

• 用 .g-col-* classes 替換 .col-* classes。這是因為我們的 CSS Grid columns 使用 grid-column 屬性，而不是 width。

• Columns and gutter 大小通過 CSS 變數設定。 將這些設定在父層 .grid，並使用 --bs-columns 和 --bs-gap 自定義在任何你想要的 inline 或 stylesheet 中。

未來，Bootstrap 可能會轉向混合解決方案，因為 gap 屬性已經幾乎完全實現了瀏覽器對 flexbox 的支持。

主要區別

與預設網格系統相比：

• Flex 通用類別不會以相同的方式影響 CSS Grid columns。

• Gaps 取代 gutters。gap 屬性替換了我們預設網格系統中的水平 padding，其功能更像是 margin。

• 因此，與 .row 不同，.grid 沒有負 margin 並且不能使用 margin 通用類別來改變 grid gutters。預設情況下，Grid gaps 水平和垂直方向都會應用。可以參閱自定義部分觀看更多詳細資訊。

• 內聯和自定義樣式應該被視為 modifier classes 的替代品。(e.g., style="--bs-columns: 3;" vs class="row-cols-3")

• 巢狀的部分是相似的。但可能需要您在巢狀的 .grid 上重置 column 數。可以參閱 nesting section 觀看更多詳細資訊。

範例

Three columns

可以使用 .g-col-4 class，創建橫跨所有螢幕寬度和設備的三個等寬列。添加 響應式 classes 以按螢幕大小更改佈局。 Add to change the layout by viewport size.

<div class="grid">
  <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>

響應式

使用響應式 class 調整斷點佈局。這裡我們從 2 個 column 開始，在 md 平板以上斷點變為 3 個 column。

<div class="grid">
  <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>

與在所有斷點中皆為 2 個 column 的佈局進行比較。

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

換行

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

<div class="grid">
  <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

Start classes 主要替換我們預設網格系統的 offset classes，但他們並不完全相同。CSS Grid 通過樣式創建網格模板，這些樣式告訴瀏覽器 “從該 column 開始” 和 “在該 column 結束”。這些屬性是 grid-column-start 和 grid-column-end. Start classes 是前者的簡寫。將他們與 column class 配對，來根據需要，調整 column 的大小和對其方式。Start classes 從 1 開始，因為 0 是這些屬性的無效值。

<div class="grid">
  <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 items(.grid 的直接子層) 上沒有 class 時，每個網格項目將自動調整為一個 column。

<div class="grid">
  <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>

此行為可以與 grid column class 混合使用。

<div class="grid">
  <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>

巢狀結構

與我們預設的網格系統類似，我們的 CSS Grid 可以輕鬆使 .grid 巢狀。但是，與預設值不同的是，此網格繼承了 row、 column、和 gap 的更改。考慮下面的例子：

• 我們使用本地 CSS 變數覆蓋預設的 column 數： --bs-columns: 3。
• 在第一個 auto-column 中，column 數是繼承的，每一個 column 是可用寬度的三分之一。
• 在第二個 auto-column 中，我們將巢狀 .grid 上的 column 數重置為 12 (我們的預設值)。
• 第三個 auto-column 沒有巢狀結構。

與我們預設的網格系統相比，這允許更複雜和自定義的佈局。

<div class="grid" 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>

客製化

使用本地 CSS 變數自定義 column、row 和 gap 的寬度。

這些 CSS 變數沒有預設值；相反地，他們應用_在提供 local instance 之前_使用的 fallback values。舉例來說，我們對 CSS Grid rows 使用 var(--bs-rows, 1)，它會忽略 --bs-rows 因為尚未在任何地方設置。一旦設定了 .grid instance 將會使用該值，而不是 fallback value 1。

No grid classes

.grid 的直接子元素是 grid items，因此無需明確添加 .g-col class即可調整它們的大小。

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

Columns and gaps

調整 column 的數量和 gaps。

<div class="grid" 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>

<div class="grid" 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

添加更多 row 並改變 column 的位置：

<div class="grid" 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。

<div class="grid" 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 的 inline style 或我們的 --bs-gap CSS 變數一起運用。

<div class="grid" 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 的一個限制是我們的預設 class 仍然由兩個 Sass 變數生成，$grid-columns 和 $grid-gutter-width。這有效地預先確定了在我們編譯的 CSS 中生成的 class 數量。這裡，您有兩個選擇：

• 修改那些預設 Sass 變數並重新編譯你的 CSS。
• 使用內聯或自定義樣式來擴充提供的 class。

例如，您可以增加 column 數量並改變 gap 大小，然後混合使用內聯樣式和預定義的 CSS Grid column class (e.g., .g-col-4) 來調整 “columns” 的大小。

<div class="grid" 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>