Skip to main content Skip to docs navigation
添加于 v5.1 在GitHub查看

CSS 网格

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

在此页

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

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

怎么运行的

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

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

  • 缝隙代替排水沟。该gap属性取代了padding我们默认网格系统中的水平线，功能更像margin.

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

  • 内联和自定义样式应被视为修饰符类（例如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 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
网页格式 
<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
网页格式 
<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
网页格式 
<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。Start classes 是前者的简写。将它们与列类配对，以根据需要调整列的大小和对齐列。Start classes begin 1as0这些属性的无效值。

.g-col-3 .g-开始-2
.g-col-4 .g-开始-6
网页格式 
<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>

自动列

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

1
1
1
1
1
1
1
1
1
1
1
1
网页格式 
<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
网页格式 
<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 网格允许轻松嵌套.grids。然而，与默认情况不同的是，此网格继承了行、列和间隙的变化。考虑下面的例子：

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

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

第一个自动列
自动列
自动列
第二个自动列
6 的 12
12 之 4
12 之 2
第三个自动列
网页格式 
<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 变量没有默认值；相反，它们应用在提供本地实例之前使用的回退值。例如，我们使用var(--bs-rows, 1)我们的 CSS Grid 行，它会被忽略，--bs-rows因为它还没有在任何地方设置。一旦是，.grid实例将使用该值而不是 的回退值1。

没有网格类

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

自动列
自动列
自动列
网页格式 
<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
网页格式 
<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
网页格式 
<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>

添加行

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

自动列
自动列
自动列
网页格式 
<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. 注意我们使用的gap是on .grid，但是row-gapandcolumn-gap可以根据需要修改。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
网页格式 
<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>

因此，您可以有不同的 vertical 和 horizo​​ntal gaps，它们可以采用单个值（所有边）或一对值（垂直和水平）。这可以应用于 的内联样式gap，或我们的--bs-gapCSS 变量。

.g-col-6
.g-col-6
.g-col-6
.g-col-6
网页格式 
<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列
.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>