跳到主要內容 跳到文檔導航
Check
in English

CSS 網格

通過示例和代碼片段了解如何啟用、使用和自定義基於 CSS Grid 構建的備用佈局系統。

在本頁面

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

注意——我們的 CSS Grid 系統是實驗性的，從 v5.1.0 開始可以選擇加入！我們將它包含在文檔的 CSS 中以便為您演示，但默認情況下它是禁用的。繼續閱讀以了解如何在您的項目中啟用它。

這個怎麼運作

在 Bootstrap 5 中，我們添加了啟用基於 CSS Grid 構建的單獨網格系統的選項，但帶有 Bootstrap 扭曲。您仍然可以獲得可以隨心所欲地應用來構建響應式佈局的類，但在底層採用不同的方法。

  • CSS Grid 是可選的。通過設置禁用默認網格系統$enable-grid-classes: false並通過設置啟用CSS網格$enable-cssgrid: true。然後，重新編譯你的 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 網格列。

  • 間隙取代排水溝。該gap屬性替換了padding我們默認網格系統中的水平，功能更像margin.

  • 因此，與.rows 不同，.grids 沒有負邊距，並且邊距實用程序不能用於更改網格排水溝。默認情況下，水平和垂直應用網格間隙。有關詳細信息，請參閱自定義部分。

  • 內聯和自定義樣式應被視為修飾符類的替代品（例如style="--bs-columns: 3;"vs 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 通過樣式創建一個網格模板，告訴瀏覽器“從這一列開始”和“在這一列結束”。這些屬性是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>

自動列

當網格項（ a 的直接子項）上沒有類時.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 允許輕鬆嵌套.grids。但是，與默認值不同的是，此網格繼承了行、列和間隙中的更改。考慮下面的例子：

  • 我們使用本地 CSS 變量覆蓋默認列數：--bs-columns: 3.
  • 在第一個自動列中，列數是繼承的，每列是可用寬度的三分之一。
  • 在第二個自動列中，我們將嵌套的列數重置.grid為 12（我們的默認值）。
  • 第三個自動列沒有嵌套內容。

在實踐中，與我們的默認網格系統相比，這允許更複雜和自定義的佈局。

第一個自動列
自動列
自動列
第二個自動列
6 的 12
4 的 12
12 個中的 2 個
第三個自動列
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 行用於我們的 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. 注意我們使用gapon .grids，但是row-gapandcolumn-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>

因此，您可以有不同的垂直和水平gaps，可以採用單個值（所有邊）或一對值（垂直和水平）。這可以與 的內聯樣式gap或我們的--bs-gapCSS 變量一起應用。

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

薩斯

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>