CSS 網格
通過示例和代碼片段了解如何啟用、使用和自定義基於 CSS Grid 構建的備用佈局系統。
Bootstrap 的默認網格系統代表了十多年來 CSS 佈局技術的巔峰之作,經過數百萬人的嘗試和測試。但是,它的創建也沒有我們在新的 CSS Grid 等瀏覽器中看到的許多現代 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
. -
因此,與
.row
s 不同,.grid
s 沒有負邊距,並且邊距實用程序不能用於更改網格排水溝。默認情況下,水平和垂直應用網格間隙。有關更多詳細信息,請參閱自定義部分。 -
內聯和自定義樣式應被視為修飾符類的替代品(例如
style="--bs-columns: 3;"
vsclass="row-cols-3"
)。 -
嵌套的工作方式類似,但可能需要您重置每個嵌套實��的列數
.grid
。有關詳細信息,請參閱嵌套部分。
例子
三列
可以使用這些.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>
響應式
使用響應式類跨視口調整佈局。在這裡,我們從最窄視口上的兩列開始,然後在中等視口及以上視口上增長到三列。
<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>
將其與所有視口的兩列佈局進行比較。
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
包裝
當水平沒有更多空間時,網格項目會自動換行到下一行。請注意,這gap
適用於網格項目之間的水平和垂直間隙。
<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-start
和grid-column-end
。開始類是前者的簡寫。將它們與列類配對,以根據需要調整列的大小和對齊方式。開始類從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>
自動列
當網格項( a 的直接子項)上沒有類時.grid
,每個網格項將自動調整為一列。
<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>
此行為可以與網格列類混合使用。
<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
s。但是,與默認值不同的是,此網格繼承了行、列和間隙中的更改。考慮下面的例子:
- 我們使用本地 CSS 變量覆蓋默認列數:
--bs-columns: 3
. - 在第一個自動列中,列數是繼承的,每列是可用寬度的三分之一。
- 在第二個自動列中,我們將嵌套的列數重置
.grid
為 12(我們的默認值)。 - 第三個自動列沒有嵌套內容。
在實踐中,與我們的默認網格系統相比,這允許更複雜和自定義的佈局。
<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>
列和間隙
調整列數和間隙。
<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>
添加行
添加更多行並更改列的位置:
<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
. 注意我們使用gap
on .grid
s,但是row-gap
andcolumn-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
s,可以採用單個值(所有邊)或一對值(垂直和水平)。這可以與 的內聯樣式gap
或我們的--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>
薩斯
CSS Grid 的一個限制是我們的默認類仍然由兩個 Sass 變量生成,$grid-columns
並且$grid-gutter-width
. 這有效地預先確定了在我們編譯的 CSS 中生成的類的數量。您在這裡有兩個選擇:
- 修改那些默認的 Sass 變量並重新編譯你的 CSS。
- 使用內聯或自定義樣式來擴充提供的類。
例如,您可以增加列數並更改間隙大小,然後使用內聯樣式和預定義的 CSS Grid 列類(例如.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>