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.

怎么运行的

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

  ¥CSS Grid is opt-in. Disable the default grid system by setting $enable-grid-classes: false and enable the CSS Grid by setting $enable-cssgrid: true. Then, recompile your Sass.

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

  ¥Replace instances of .row with .grid. The .grid class sets display: grid and creates a grid-template that you build on with your HTML.

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

  ¥Replace .col-* classes with .g-col-* classes. This is because our CSS Grid columns use the grid-column property instead of width.

• 列和装订线大小通过 CSS 变量设置。在父 .grid 上设置这些，并使用 --bs-columns 和 --bs-gap 进行内联或样式表中的自定义。

  ¥Columns and gutter sizes are set via CSS variables. Set these on the parent .grid and customize however you want, inline or in a stylesheet, with --bs-columns and --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 网格列。

  ¥Flex utilities don’t affect the CSS Grid columns in the same way.

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

  ¥Gaps replaces gutters. The gap property replaces the horizontal padding from our default grid system and functions more like margin.

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

  ¥As such, unlike .rows, .grids have no negative margins and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the customizing section for more details.

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

  ¥Inline and custom styles should be viewed as replacements for modifier classes (e.g., style="--bs-columns: 3;" vs class="row-cols-3").

• 嵌套的工作原理类似，但可能需要你重置嵌套 .grid 的每个实例上的列计数。详细信息请参见 嵌套部分。

  ¥Nesting works similarly, but may require you to reset your column counts on each instance of a nested .grid. See the nesting section for details.

示例

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

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

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

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

<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

起始类旨在替换我们默认网格的偏移类，但它们并不完全相同。CSS Grid 通过告诉浏览器 “从本栏开始” 和 “在此栏结束。” 属性的样式创建网格模板，这些属性是 grid-column-start 和 grid-column-end。起始类是前者的简写。将它们与列类配对，以根据需要调整列的大小和对齐列。起始类从 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.

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

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

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

  ¥We override the default number of columns with a local CSS variable: --bs-columns: 3.

• 在第一个自动列中，列数是继承的，每列是可用宽度的三分之一。

  ¥In the first auto-column, the column count is inherited and each column is one-third of the available width.

• 在第二个自动列中，我们将嵌套 .grid 上的列数重置为 12（我们的默认值）。

  ¥In the second auto-column, we’ve reset the column count on the nested .grid to 12 (our default).

• 第三个自动列没有嵌套内容。

  ¥The third auto-column has no nested content.

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

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

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

定制

¥Customizing

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

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

这些 CSS 变量没有默认值；相反，它们应用回退值，这些值在提供本地实例之前一直使用。例如，我们使用 var(--bs-rows, 1) 作为 CSS 网格行，它会忽略 --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.

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

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

添加行

¥Adding rows

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

¥Adding more rows and changing the placement of columns:

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

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

<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 网格的一个限制是我们的默认类仍然由两个 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。

  ¥Modify those default Sass variables and recompile your CSS.

• 使用内联或自定义样式来扩充提供的类。

  ¥Use inline or custom styles to augment the provided classes.

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

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

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