Skip to main content Skip to docs navigation
Added in v5.1 View on GitHub

CSS Grid

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

On this page

Bootstrap的默认网格系统代表了十多年来CSS布局技术的巅峰，数百万人尝试并测试了这些技术。 但是，它也是在没有我们在新的CSS网格等浏览器中看到的许多现代CSS功能和技术的情况下创建的。

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

工作原理

使用Bootstrap 5，我们添加了一个选项，可以启用一个独立的网格系统，该系统构建在CSS网格上，但带有Bootstrap的改造。 你仍然可以随心所欲地应用类来构建响应式布局，但背后有一种不同的方法。

  • CSS网格是可选择的通过设置$enable-grid-classes：false禁用默认网格系统，并通过设置$enable-cssgrid:true启用CSS网格。 然后，重新编译您的Sass。

  • 将.row的实例替换为.grid.grid类设置display:grid并创建一个使用HTML构建的网格模板。

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

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

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

关键差异

与默认网格系统相比：

  • Flex实用程序不会以同样的方式影响CSS网格列。

  • Gaps将替换gutters。 gap属性取代了默认网格系统中的水平padding，其功能更像margin。

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

  • 内联样式和自定义样式应被视为修饰符类的替换（例如，style="--bs-columns: 3;"vsclass="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>

Wrapping

当水平方向上没有更多空间时，网格项会自动换行到下一行。 请注意，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>

Starts

Start类旨在替换默认网格的偏移类，但它们并不完全相同。 CSS网格通过样式创建网格模板，这些样式告诉浏览器从这列开始和到此列结束这些属性是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的直属子项）上没有类时，每个网格项的大小将自动调整为一列。

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的简单嵌套。 但是，与默认网格不同，此网格继承行、列和间隙中的更改。 考虑以下示例：

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

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

First auto-column
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变量自定义列数、行数和间隙宽度。

Variable Fallback value Description
--bs-rows 1 The number of rows in your grid template
--bs-columns 12 The number of columns in your grid template
--bs-gap 1.5rem The size of the gap between columns (vertical and horizontal)

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

非grid类

.grid的直接子元素是网格项，因此将在不显式添加.g-col类的情况下调整它们的大小。

Auto-column
Auto-column
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和gaps

调整列数和间隙。

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

添加行

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

Auto-column
Auto-column
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，但行gap和列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>

因此，可以有不同的垂直和水平gap，可以取一个值(所有边)或一对值(垂直和水平)。 这可以与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>

Sass

CSSGrid的一个限制是，我们的默认类仍然由两个Sass变量生成，即$grid-columns和$grid-gutter-width。 这有效地预先确定了在我们编译的CSS中生成的类的数量。 这里有两个选项：

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

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