跳到主要內容 跳到文件瀏覽
v5.1 中新增 在 GitHub 上檢視

CSS Grid

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

此頁面

Bootstrap 的預設網格系統代表了超過十年的 CSS 排版技術，經由數百萬人的試驗和測試。但它也是在沒有許多我們在瀏覽器中看到的現代 CSS 功能和技術的情況下建立的，例如新的 CSS Grid。

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

它的運作方式

在 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 達到幾乎完全的瀏覽器支援。

主要差異

與預設格線系統相比

  • Flex 工具不會以相同方式影響 CSS Grid 欄位。

  • 間距取代溝槽。gap 屬性取代了預設格線系統中的水平 padding，其功能更類似於 margin。

  • 因此，與 .row 不同，.grid 沒有負邊界，且無法使用邊界工具變更格線溝槽。預設情況下，格線間距會水平和垂直套用。有關更多詳細資訊，請參閱 自訂區段。

  • 內嵌和自訂樣式應視為修改器類別的替代品（例如，style="--bs-columns: 3;" 與 class="row-cols-3"）。

  • 巢狀運作方式類似，但可能需要在巢狀 .grid 的每個執行個體上重設欄位數量。有關詳細資訊，請參閱 巢狀區段。

範例

三欄

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

.g-col-4
.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>

回應式

使用回應式類別調整視窗中的版面配置。在此，我們從最窄視窗開始使用兩欄，然後在中型視窗及以上版本中增加到三欄。

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.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
.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>

換行

當水平空間不足時，格線項目會自動換至下一行。請注意，gap 適用於格線項目之間的水平和垂直間距。

.g-col-6
.g-col-6
.g-col-6
.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>

開始

開始類別旨在取代我們的預設格線的偏移類別，但它們並不完全相同。CSS 格線透過樣式建立格線範本，指示瀏覽器「從此欄開始」和「在此欄結束」。這些屬性為 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>

自動欄位

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

1
1
1
1
1
1
1
1
1
1
1
1
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
1
1
1
1
1
1
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>

巢狀

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

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

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

第一個自動欄
自動欄
自動欄
第二個自動欄
6 of 12
4 of 12
2 of 12
第三個自動欄
html 
<div class="grid text-center" 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 變數自訂欄數、列數和間距寬度。

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

這些 CSS 變數沒有預設值；相反地，它們套用備用值，使用時間為 直到 提供本機執行個體為止。例如，我們使用 var(--bs-rows, 1) 作為 CSS Grid 列，它會忽略 --bs-rows，因為它尚未在任何地方設定。一旦設定，.grid 執行個體將使用該值，而不是備用值 1。

沒有網格類別

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

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

欄和間距

調整欄數和間距。

.g-col-2
.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>

加入列

加入更多列並變更欄的配置

自動欄
自動欄
自動欄
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>

間距

僅修改 row-gap 即可變更垂直間距。請注意，我們在 .grid 使用 gap，但 row-gap 和 column-gap 可視需要修改。

.g-col-6
.g-col-6
.g-col-6
.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
.g-col-6
.g-col-6
.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 欄位
.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>