Bootstrap的默认网格系统代表了十多年CSS布局技术的结晶，这些技术经过数百万人验证和测试。但它的创建也没有利用我们在浏览器中看到的许多现代CSS功能和技术，比如新的CSS Grid。
注意——我们的 CSS 网格系统是可选择使用的！ 我们在文档的 CSS 中包含了它以向你演示，但默认是禁用的。继续阅读以了解如何在你的项目中启用它。另请参阅我们的 容器查询工具类，它涵盖了一个相关但不同的使用场景。
它是如何工作的
Bootstrap 包含一个可选的基于 CSS Grid 的网格系统，但带有 Bootstrap 的独特风格。你依旧可以使用随时应用的类来构建响应式布局，但其底层方法有所不同。
CSS 网格是可选择的。 通过设置
$enable-grid-classes: false禁用默认网格系统，通过设置$enable-cssgrid: true启用 CSS 网格。然后，重新编译你的 Sass。将
.row替换为.grid。.grid类设置display: grid并创建一个grid-template，你可以在 HTML 中基于它进行构建。将
.col-*类替换为.g-col-*类。 这是因为我们的 CSS 网格列使用grid-column属性，而不是width。列和间隙大小通过 CSS 变量设置。 将这些设置在父级
.grid上，并根据需要自定义，无论是在内联还是样式表中，使用--bs-columns和--bs-gap。响应式类使用容器查询。 每个
.grid都是一个查询容器（container-type: inline-size），所以响应式的.g-col-*和.g-start-*类会根据.grid自身的宽度，而不是视口的宽度进行响应。
主要区别
与默认网格系统相比：
Flex 工具类不会以相同的方式影响 CSS 网格列。
间隙取代了沟槽。
gap属性取代了我们默认网格系统中的水平padding，并且更像margin的功能。因此，与
.row不同，.grid没有负边距，并且无法使用边距工具类来更改网格沟槽。网格间隙默认在水平和垂直方向应用。详情请参见 自定义部分。内联样式和自定义样式应被视为修饰类的替代方案（例如，
style="--bs-columns: 3;"与class="row-cols-3"）。嵌套的工作方式类似，但可能需要在每个嵌套
.grid实例上重置列数。详情请参见 嵌套部分。
示例
三栏
通过使用 .g-col-4 类，可以在所有容器大小和设备上创建三个等宽的列。添加 响应式类，以根据 .grid 容器的宽度更改布局。
<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>响应式
使用响应式类在不同断点调整布局。在这里，我们从最窄的容器开始使用两列布局，然后在中等及以上容器上扩展为三列。拖动示例的句柄来调整.grid的大小，并观察列如何根据它的宽度而不是视口宽度重新排列。
响应式 .g-col-* 和 .g-start-* 类是由 容器查询 提供支持的，而不是媒体查询。.grid 被设置为查询容器（container-type: inline-size），因此其网格项会根据 .grid 本身的宽度响应，而不是视口的宽度。这意味着放置在窄列中的 .grid 将根据该列的宽度切换布局，而不是浏览器窗口的大小。
<div class="grid text-center">
<div class="g-col-6 md:g-col-4">.g-col-6 .md:g-col-4</div>
<div class="g-col-6 md:g-col-4">.g-col-6 .md:g-col-4</div>
<div class="g-col-6 md:g-col-4">.g-col-6 .md:g-col-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>操场
上面的例子受到此页面宽度的限制，因此你只能将它们调整到 sm 范围内，然后空间就会用完。打开下面的全屏演示，可以拖动一组网格跨越所有断点范围，并观察每个布局如何根据容器的宽度而不是视口的宽度重新排列。
换行
当水平空间不足时，网格项会自动换到下一行。请注意，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>开始
Start 类旨在替代我们默认网格的偏移类，但它们并不完全相同。CSS Grid 通过样式创建网格模板，这些样式指示浏览器“从这一列开始”和“到这一列结束”。这些属性是 grid-column-start 和 grid-column-end。Start 类是前者的简写形式。将它们与列类配合使用，可以根据需要调整列的大小和对齐方式。Start 类从 1 开始，因为 0 对这些属性来说是无效值。
<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 网格允许轻松嵌套 .grid。然而，不同于默认设置，此网格会继承行、列和间隙的更改。请参考以下示例：
- 我们用本地 CSS 变量
--bs-columns: 3覆盖默认的列数。 - 在第一个自动列中，列数被继承，每列占可用宽度的三分之一。
- 在第二个自动列中，我们已将嵌套
.grid的列数重置为 12（我们的默认值）。 - 第三个自动列没有嵌套内容。
在实践中，与我们的默认网格系统相比，这允许更复杂和自定义的布局。
<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 变量没有默认值；相反，它们使用备用值 直到 提供了本地实例。例如，我们使用 var(--bs-rows, 1) 对于我们的 CSS 网格行，它会忽略 --bs-rows 因为那还没有在任何地方设置。一旦设置了， .grid 实例将使用该值，而不是备用值 1.
没有网格类
.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>差距
只通过修改来改变垂直间隙 row-gap请注意，我们使用 gap 开 .grids，但 row-gap 和 column-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>因此，你可以有不同的垂直和水平gap，它们可以接受单个值（所有边）或一对值（垂直和水平）。这可以通过内联样式应用于gap，或者使用我们的--bs-gap CSS 变量。
<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-x 生成。这实际上预先确定了在编译后的 CSS 中生成的类的数量。你在这里有两个选择：
- 修改那些默认的 Sass 变量并重新编译你的 CSS。
- 使用内联或自定义样式来增强提供的类。
例如，你可以增加列数并更改间距大小，然后使用内联样式与预定义的 CSS Grid 列类（例如 .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>