跳到主要内容 跳到文档导航
Check
in English

CSS 网格

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

在本页面

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

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

这个怎么运作

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

  • CSS Grid 是可选的。通过设置禁用默认网格系统$enable-grid-classes: false并通过设置启用CSS网格$enable-cssgrid: true。然后，重新编译你的 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 的几乎完整的浏览器支持。

主要区别

与默认网格系统相比：

  • 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
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 通过样式创建一个网格模板，告诉浏览器“从这一列开始”和“在这一列结束”。这些属性是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>

自动列

当网格项（ a 的直接子项）上没有类时.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 允许轻松嵌套.grids。但是，与默认值不同的是，此网格继承了行、列和间隙中的更改。考虑下面的例子：

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

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

第一个自动列
自动列
自动列
第二个自动列
6 的 12
4 的 12
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 变量没有默认值；相反，它们应用在提供本地实例之前使用的后备值。例如，我们将var(--bs-rows, 1)CSS Grid 行用于我们的 CSS Grid 行，它会忽略，--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. 注意我们使用gapon .grids，但是row-gapandcolumn-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>

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

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

萨斯

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>