Added in v5.1

CSS 网格

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

Bootstrap 的默认网格系统代表了十多年 CSS 布局技术的结晶，经过数百万人的使用和验证。但它的创建也没有利用我们在像新的 CSS 网格这样的浏览器中看到的许多现代 CSS 特性和技术。

🌐 Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.

注意——我们的 CSS Grid 系统从 v5.1.0 版本开始是实验性和可选择使用的！ 我们在文档的 CSS 中包含了它，以便为你演示，但默认情况下是禁用的。继续阅读以了解如何在你的项目中启用它。

怎么运行的

🌐 How it works

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

🌐 With Bootstrap 5, we’ve added the option to enable a separate grid system that’s built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.

CSS Grid是可选择的。 通过设置 $enable-grid-classes: false 来禁用默认的网格系统，通过设置 $enable-cssgrid: true 来启用 CSS Grid。然后，重新编译你的 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。

🌐 In the future, Bootstrap will likely shift to a hybrid solution as the gap property has achieved nearly full browser support for flexbox.

主要差异

🌐 Key differences

与默认网格系统相比：

🌐 Compared to the default grid system:

Flex 实用程序不会以相同的方式影响 CSS 网格列。
Gaps 替代了 gutters。gap 属性替代了我们默认网格系统中的水平 padding，其功能更像 margin。
因此，与 .row 不同，.grid 没有负边距，也不能使用边距工具类来更改网格间距。网格间隙默认会在水平和垂直方向上应用。更多详情请参见自定义部分。
内联样式和自定义样式应被视为修改器类的替代品（例如，style="--bs-columns: 3;" 对比 class="row-cols-3"）。
嵌套的工作方式类似，但可能需要你在每个嵌套的 .grid 实例上重置你的列计数。详情请参阅nesting部分。

示例

🌐 Examples

三栏

🌐 Three columns

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

🌐 Three equal-width columns across all viewports and devices can be created by using the .g-col-4 classes. Add responsive classes to change the layout by viewport size.

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

响应式

🌐 Responsive

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

🌐 Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.

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

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

🌐 Compare that to this two column layout at all viewports.

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

封装

🌐 Wrapping

当水平方向没有更多空间时，网格项目会自动换行到下一行。请注意，gap 适用于网格项目之间的水平和垂直间隙。

🌐 Grid items automatically wrap to the next line when there’s no more room horizontally. Note that the gap applies to horizontal and vertical gaps between grid items.

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

开始

🌐 Starts

Start 类用于替代我们默认网格的偏移类，但它们并不完全相同。CSS Grid 通过样式创建网格模板，这些样式告诉浏览器“从这一列开始”和“到这一列结束”。这些属性是 grid-column-start 和 grid-column-end。Start 类是前者的简写。将它们与列类配合使用，可以根据需要调整列的大小和对齐。Start 类从 1 开始，因为 0 对这些属性来说是无效值。

🌐 Start classes aim to replace our default grid’s offset classes, but they’re not entirely the same. CSS Grid creates a grid template through styles that tell browsers to “start at this column” and “end at this column”. Those properties are grid-column-start and grid-column-end. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at 1 as 0 is an invalid value for these properties.

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

自动列

🌐 Auto columns

当网格项（.grid 的直接子元素）上没有类时，每个网格项将自动调整为一列的大小。

🌐 When there are no classes on the grid items (the immediate children of a .grid), each grid item will automatically be sized to one column.

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>

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

🌐 This behavior can be mixed with grid column classes.

.g-col-6

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>

嵌套

🌐 Nesting

类似于我们的默认网格系统，我们的 CSS 网格允许轻松嵌套 .grid。然而，与默认网格不同，这个网格会继承行、列和间隙的变化。请参考下面的示例：

🌐 Similar to our default grid system, our CSS Grid allows for easy nesting of .grids. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:

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

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

🌐 In practice this allows for more complex and custom layouts when compared to our default grid system.

First auto-column

Auto-column

Second auto-column

6 of 12

4 of 12

2 of 12

Third auto-column

html

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

定制

🌐 Customizing

使用本地 CSS 变量自定义列数、行数和间隙宽度。

🌐 Customize the number of columns, the number of rows, and the width of the gaps with local CSS variables.

变量	备用值	描述
`--bs-rows`	`1`	网格模板中的行数
`--bs-columns`	`12`	网格模板中的列数
`--bs-gap`	`1.5rem`	列之间的间隙大小（垂直和水平）

这些 CSS 变量没有默认值；相反，它们应用回退值，这些回退值会在提供本地实例之前使用。例如，我们在 CSS 网格行中使用 var(--bs-rows, 1)，它会忽略 --bs-rows，因为它尚未在任何地方设置。一旦设置了，.grid 实例将使用该值，而不是回退值 1。

🌐 These CSS variables have no default value; instead, they apply fallback values that are used until a local instance is provided. For example, we use var(--bs-rows, 1) for our CSS Grid rows, which ignores --bs-rows because that hasn’t been set anywhere yet. Once it is, the .grid instance will use that value instead of the fallback value of 1.

没有网格类

🌐 No grid classes

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

🌐 Immediate children elements of .grid are grid items, so they’ll be sized without explicitly adding a .g-col class.

Auto-column

html

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

柱子和间隙

🌐 Columns and gaps

调整列数和间隙。

🌐 Adjust the number of columns and the gap.

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

添加行

🌐 Adding rows

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

🌐 Adding more rows and changing the placement of columns:

Auto-column

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>

差距

🌐 Gaps

仅通过修改 row-gap 来更改垂直间隙。请注意，我们在 .grid 上使用 gap，但 row-gap 和 column-gap 可以根据需要进行修改。

🌐 Change the vertical gaps only by modifying the row-gap. Note that we use gap on .grids, but row-gap and column-gap can be modified as needed.

.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 变量。

🌐 Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --bs-gap CSS variable.

.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 中生成的类的数量。你这里有两个选择：

🌐 One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

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

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

🌐 For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .g-col-4).

14 columns

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