跳到主要內容 跳到文檔導航
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
<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>

響應式

使用響應式類跨視口調整佈局。在這裡,我們從最窄視口上的兩列開始,然後在中等視口及以上視口上增長到三列。

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

將其與所有視口的兩列佈局進行比較。

.g-col-6
.g-col-6
<div class="grid">
  <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
<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>

開始

開始類旨在替換我們默認網格的偏移類,但它們並不完全相同。CSS Grid 通過樣式創建一個網格模板,告訴瀏覽器“從這一列開始”和“在這一列結束”。這些屬性是grid-column-startgrid-column-end。開始類是前者的簡寫。將它們與列類配對,以根據需要調整列的大小和對齊方式。開始類從1這些0屬性的無效值開始。

.g-col-3 .g-start-2
.g-col-4 .g-start-6
<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>

自動列

當網格項( a 的直接子項)上沒有類時.grid,每個網格項將自動調整為一列。

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

此行為可以與網格列類混合使用。

.g-col-6
1
1
1
1
1
1
<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 允許輕鬆嵌套.grids。但是,與默認值不同的是,此網格繼承了行、列和間隙中的更改。考慮下面的例子:

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

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

第一個自動列
自動列
自動列
第二個自動列
6 的 12
4 的 12
12 個中的 2 個
第三個自動列
<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 變量自定義列數、行數和間隙寬度。

多變的 後備值 描述
--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類即可調整它們的大小。

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

列和間隙

調整列數和間隙。

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

添加行

添加更多行並更改列的位置:

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

差距

僅通過修改row-gap. 注意我們使用gapon .grids,但是row-gapandcolumn-gap可以根據需要進行修改。

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

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

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

薩斯

CSS Grid 的一個限制是我們的默認類仍然由兩個 Sass 變量生成,$grid-columns並且$grid-gutter-width. 這有效地預先確定了在我們編譯的 CSS 中生成的類的數量。您在這裡有兩個選擇:

  • 修改那些默認的 Sass 變量並重新編譯你的 CSS。
  • 使用內聯或自定義樣式來擴充提供的類。

例如,您可以增加列數並更改間隙大小,然後使用內聯樣式和預定義的 CSS Grid 列類(例如.g-col-4)來調整“列”的大小。

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