Added in v5.1 在 GitHub 上查看

CSS 网格

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

当前页

Bootstrap的默认网格系统代表了十多年CSS布局技术的顶峰，经过数百万人的尝试和测试。但是，它的创建也没有我们在浏览器中看到的许多现代CSS功能和技术，例如新的CSS 网格。

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

工作原理

在 Bootstrap 5 中，我们添加了启用基于 CSS Grid 构建的单独网格系统的选项，但带有 Bootstrap 扭曲。您仍然可以获得可以随心所欲地应用以构建响应式布局的类，但在引擎盖下采用不同的方法。

CSS Grid是可选的。通过设置$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。

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

主要区别

与默认网格系统相比：

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

示例

三列

可以使用.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

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

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

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 通过样式创建网格模板，这些样式告诉浏览器“从此列开始”和“在此列结束”。这些属性是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的直接子项）上没有类时，每个网格项将自动调整为一列。

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

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（默认值）。
第三个自动列没有嵌套内容。

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

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" 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 变量自定义列数、行数和间距宽度。

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

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

无网格类

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

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>

列和间隙

调整列数和间距。

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

添加行

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

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>

间隙

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

.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-gapCSS变量来应用。

.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 网格的一个限制是，我们的默认类仍然由两个 Sass 变量生成，$grid-columns和$grid-gutter-width。这有效地预先决定了我们编译的 CSS 中生成的类的数量。您在这里有两个选择：

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

例如，您可以增加列计数并更改间距大小，然后混合使用内联样式和预定义的 CSS Grid 列类（例如，.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>