Skip to main content Skip to docs navigation

CSS Grid

通过示例和代码片段了解如何启用、使用和自定义基于 CSS Grid 构建的备用布局系统。

内容提要

Bootstrap 的默认网格系统是十多年来 CSS 布局技术的巅峰之作，经过数百万人的尝试和测试。 但是，它没有使用我们浏览器中看到的许多现代 CSS 特性和技术。如在 CSS Grid 中使用。

请注意——我们的 CSS 网格系统是实验性的功能，从 v5.1.0 开始可以选择使用！我们将它在文档的 CSS 中使用，以便为您演示，但默认情况下它是禁用的。 继续阅读以了解如何在您的项目中启用它。

工作原理

在 Bootstrap 5 中，我们添加了启用基于 CSS Grid 构建的单独网格系统的选项，但使用了 Bootstrap twist。 您仍然可以随心所欲地应用它的类来构建响应式布局，但在底层采用不同的方法。

  • CSS Grid 是可选的。 通过设置 $enable-grid-classes: false 禁用默认网格系统并通过设置 $enable-cssgrid:true启用 CSS Grid。 然后，重新编译你的 Sass。

  • 用 .grid 替换 .row。 .grid 类设置 display: grid 并创建一个您使用 HTML 构建的 grid-template。

  • 用 .g-col-* 类替换 .col-* 类。 这是因为我们的 CSS Grid 列使用 grid-column 属性而不是 width。

  • 列和沟槽大小通过 CSS 变量设置。 在父 .grid 上设置这些并根据需要自定义，使用 --bs-columns 和 --bs-gap，内联或在样式表中。

未来，Bootstrap 可能会转向混合解决方案，因为 gap 属性已经实现了广泛的支持，支持 flexbox 的浏览器几乎都支持gap。

关键不同点 differences

与默认网格系统相比

  • Flex 实用程序可能没有预期的效果。

  • 使用 Gaps 取代 沟槽(gutter)。 gap 属性替换了我们默认网格系统中的水平 padding，其功能更像 margin。

  • 因此，与 .row 不同，.grid 没有负边距，并且边距实用程序不能用于更改网格边距。 默认情况下，都会应用水平和垂直网格间隙。 请参阅自定义部分了解更多详情。

  • 内联和自定义样式应被视为修饰符类的替代品（例如，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-start 和 grid-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>

自动列

当网格项（.grid 的直接子项）上没有类时，每个网格项将自动设置列宽为1。

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 允许轻松嵌套 .grid。 但是，与默认值不同的是，嵌套网格继承了行、列和间隙中的更改。 考虑下面的例子：

  • 我们使用本地 CSS 变量覆盖默认列数：--bs-columns: 3。
  • 在第一个自动列中，列数是继承的，每列是可用宽度的三分之一。
  • 在第二个自动列中，我们将嵌套 .grid 上的列数重置为 12（我们的默认值）。
  • 第三个自动列没有嵌套内容。

在实践中，与我们的默认网格系统相比，这允许更复杂和自定义的布局。

First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
<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 变量没有默认值； 在直到明确的值之前，它们使用后备值。 例如，我们的 CSS Grid 行使用值 var(--bs-rows, 1) ，因为它尚未设置任何值。 然而， 一旦设置了值，.grid 实例将使用该值而不是备用值 1 。

省略网格类

.grid 的直接子元素是网格项，因此无需显式添加 .g-col 类即可调整它们的大小。

Auto-column
Auto-column
Auto-column
<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>

添加行

添加更多行并更改列的位置：

Auto-column
Auto-column
Auto-column
<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 来仅更改垂直间距。 注意我们在.grid上使用gap，也可以使用row-gap和column-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>

因此，您可以有不同的垂直和水平 gap值，可以采用单个值（所有间隙）或一对值（垂直和水平）。 这可以通过 gap 的内联样式或我们的 --bs-gap CSS 变量应用。

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

Sass

CSS Grid 的一个限制是我们的默认类仍然由两个 Sass 变量生成，$grid-columns 和 $grid-gutter-width。 这有效地预先确定了在我们编译的 CSS 中生成的类的数量。 您在这里有两个选择：

  • 修改那些默认的 Sass 变量并重新编译你的 CSS。
  • 使用内联或自定义样式来扩充提供的类。

例如，您可以增加列数并更改间隙大小，然后使用内联样式和预定义的 CSS Grid 列类（例如 .g-col-4 ）设置您的列的大小。

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