跳至主要内容 跳至文档导航
v5.1 中新增 在 GitHub 上查看

CSS Grid

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

本页内容

Bootstrap 的默认网格系统代表了十多年来经过数百万用户尝试和测试的 CSS 布局技术的集大成。但是，它也是在没有浏览器中出现的许多现代 CSS 特性和技术的情况下创建的，例如新的 CSS Grid。

注意——我们的 CSS Grid 系统是实验性的，并且从 v5.1.0 开始需要选择加入！我们在文档的 CSS 中包含它是为了向你展示它，但默认情况下它是禁用的。继续阅读以了解如何在你的项目中启用它。

工作原理

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

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

  • 用 .grid 替换 .row 的实例。.grid 类设置 display: grid 并创建 grid-template，你可以使用 HTML 在其上进行构建。

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

  • 列和间距大小通过 CSS 变量设置。在父 .grid 上设置这些变量，并使用 --bs-columns 和 --bs-gap 以内联方式或在样式表中自定义，随心所欲。

未来，Bootstrap 可能转向混合解决方案，因为 gap 属性已几乎完全支持 flexbox 浏览器。

关键差异

与默认网格系统相比

  • Flex 实用程序不会以相同的方式影响 CSS 网格列。

  • 间距取代了边距。gap 属性取代了我们默认网格系统中的水平 padding，其功能更像 margin。

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

  • 内联和自定义样式应视为修改器类的替代品（例如，style="--bs-columns: 3;" 与 class="row-cols-3"）。

  • 嵌套工作方式类似，但可能需要在嵌套 .grid 的每个实例上重置列数。有关详细信息，请参阅 嵌套部分。

示例

三列

可以使用 .g-col-4 类创建所有视口和设备上三个等宽列。添加 响应式类 以按视口大小更改布局。

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

响应式

使用响应式类来调整视口中的布局。这里我们从最窄视口上的两列开始，然后在中等及以上视口上扩展到三列。

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

将其与所有视口上的此两列布局进行比较。

.g-col-6
.g-col-6
html 
<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 适用于网格项之间的水平和垂直间距。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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-start 和 grid-column-end。开始类是前者的简写。将它们与列类配对，以根据需要调整列的大小和对齐方式。开始类从 1 开始，因为 0 是这些属性的无效值。

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html 
<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 的直接子项）上没有类时，每个网格项都会自动调整为一列。

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

此行为可以与网格列类混合使用。

.g-col-6
1
1
1
1
1
1
html 
<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（我们的默认值）。
  • 第三个自动列没有嵌套内容。

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

第一个自动列
自动列
自动列
第二个自动列
12 中的 6
12 中的 4
12 中的 2
第三个自动列
html 
<div class="grid text-center" 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，因为该值尚未在任何地方设置。一旦设置，.grid 实例将使用该值，而不是后备值 1。

无网格类

.grid 的直接子元素是网格项，因此它们将在不显式添加 .g-col 类的的情况下调整大小。

自动列
自动列
自动列
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

列和间距

调整列数和间距。

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

添加行

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

自动列
自动列
自动列
html 
<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 来更改垂直间隙。请注意，我们在 .grid 上使用 gap，但 row-gap 和 column-gap 可以根据需要进行修改。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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 变量来应用。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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-width 生成。这实际上预先确定了在编译后的 CSS 中生成的类数。这里你有两个选择

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

例如，你可以增加列数并更改间隙大小，然后使用内联样式和预定义的 CSS Grid 列类（例如 .g-col-4）对“列”进行调整。

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