通过示例和代码片段了解如何启用、使用和自定义我们基于 CSS 网格构建的备用布局系统。
Bootstrap 的默认网格系统代表了十多年来 CSS 布局技术的巅峰之作，经过数百万人的尝试和测试。但是，它的创建也没有我们在新的 CSS 网格等浏览器中看到的许多现代 CSS 功能和技术。
请注意，我们的 CSS 网格系统处于实验阶段，从 v5.1.0 开始可选择加入！我们将它包含在文档的 CSS 中以向您展示它，但默认情况下它是禁用的。继续阅读以了解如何在您的项目中启用它。
运作方式
在 Bootstrap 5 中，我们添加了启用基于 CSS 网格构建的单独网格系统的选项，但带有 Bootstrap 的扭曲。你仍然会得到可以随心所欲地应用来构建响应式布局的类，但后台采用不同的方法。
-
CSS 网格是选择加入的。通过设置禁用默认网格系统，并通过设置启用 CSS 网格。然后，重新编译您的 Sass。
$enable-grid-classes: false$enable-cssgrid: true -
将
.row的实例替换为.grid。该类设置并创建了您使用 HTML 构建的类。.griddisplay: gridgrid-template -
将
.col-*类替换为.g-col-*类。这是因为我们的 CSS 网格列使用属性而不是 .grid-columnwidth -
列和装订线大小通过 CSS 变量设置。在父级上设置这些，并根据需要进行自定义，内联或在样式表中，使用 和 。
.grid--bs-columns--bs-gap
未来，Bootstrap 可能会转向混合解决方案，因为该属性已经实现了对 flexbox 的几乎完全的浏览器支持。gap
主要区别
与默认网格系统相比：
-
Flex 实用程序不会以同样的方式影响 CSS 网格列。
-
间隙取代了装订线。该属性替换了我们默认网格系统中的水平，其功能更像 。
gappaddingmargin -
因此，与 s 不同，s 没有负边距，并且边距实用程序不能用于更改网格装订线。默认情况下，网格间隙在水平和垂直方向应用。有关更多详细信息，请参阅定制部分。
.row.grid -
内联和自定义样式应被视为修饰符类（例如 vs ）的替代品。
style="--bs-columns: 3;"class="row-cols-3" -
嵌套的工作原理类似，但可能需要您在嵌套的每个实例上重置列计数。有关详细信息，请参阅嵌套部分。
.grid
例子
三列
可以使用类在所有视口和设备上创建三个等宽的列。添加响应式类以按视口大小更改布局。.g-col-4
<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>响应
使用响应式类跨视口调整布局。在这里，我们从最窄视口上的两列开始，然后在中等视口及以上视口上增长到三列。
<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>将其与所有视口上的两列布局进行比较。
<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
<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-startgrid-column-end10
<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
<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>此行为可以与网格列类混合使用。
<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 网格允许轻松嵌套 s。但是，与默认值不同的是，此网格继承了行、列和间隙的更改。请考虑以下示例：.grid
- 我们用本地 CSS 变量覆盖默认列数：。
--bs-columns: 3 - 在第一个自动列中，列计数是继承的，每列是可用宽度的三分之一。
- 在第二个自动列中，我们将嵌套的列计数重置为 12（我们的默认值）。
.grid - 第三个自动列没有嵌套内容。
在实践中，与我们的默认网格系统相比，这允许更复杂和自定义的布局。
<div class="grid text-center overflow-x-auto" 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 变量没有默认值;相反，它们应用在提供本地实例之前使用的回退值。例如，我们用于 CSS 网格行，它忽略了，因为它尚未在任何地方设置。一旦成为，实例将使用该值而不是 的回退值。var(--bs-rows, 1)--bs-rows.grid1
无网格类
直接子元素是网格项，因此它们的大小将在不显式添加类的情况下进行调整。.grid.g-col
<div class="grid text-center" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>列和间隙
调整列数和间隙。
<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><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>添加行
添加更多行并更改列的位置：
<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>差距
仅通过修改 来更改垂直间隙。请注意，我们在 s 上使用，但可以根据需要进行修改。row-gapgap.gridrow-gapcolumn-gap
<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>因此，您可以有不同的垂直和水平 s，它们可以采用单个值（所有边）或一对值（垂直和水平）。这可以与 的内联样式或我们的 CSS 变量一起应用。gapgap--bs-gap
<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 网格的一个限制是我们的默认类仍然由两个 Sass 变量生成，以及 。这有效地预先确定了我们编译的 CSS 中生成的类数量。这里有两个选项：$grid-columns$grid-gutter-width
- 修改这些默认的 Sass 变量并重新编译您的 CSS。
- 使用内联或自定义样式来扩充提供的类。
例如，您可以增加列数并更改间隙大小，然后使用内联样式和预定义的 CSS 网格列类（例如 ）的组合来调整“列”的大小。.g-col-4
<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>