Grid布局(CSS Grid)

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

本页导航↓

Bootstrap的默认网格系统代表了十多年来CSS布局技术的顶峰，数百万人对此进行了尝试和测试。但是，它的创建也没有我们在浏览器中看到的许多现代CSS特性和技术，比如新的Gird布局。

译者注：Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但它们也存在重大区别。
Flex 布局是轴线布局，只能指定”项目”针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大，我们团队为此整理了一个扩展文档：CSS Grid 网格布局完整教程

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

作用原理

在Bootstrap5中，我们添加了一个选项来启用一个独立的网格系统，该系统构建在CSS网格上，但有一个Bootstrap扭曲。你仍然可以随心所欲地应用这些类来构建响应性的布局，但在幕后采用了不同的方法。

CSS网格是可选的。 $enable-cssgrid: true. 通过设置$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属性已经实现了对弹性盒几乎完全的浏览器支持。

关键区别

与默认网格系统相比：

Flex实用程序不会以相同的方式影响CSS网格列。
缝隙代替了间沟。gap属性替换默认网格系统中的水平padding，其功能更像margin。
因此，与.rows不同，.grid没有负边距，边距实用程序不能用于更改网格左侧列。有关详细信息，请参阅自定义部分。
内联样式和自定义样式被视为修改器类的替代品（例如，style="--bs-columns: 3;"vsclass="row-cols-3"）。
嵌套的工作原理类似，但可能需要在嵌套的.grid的每个实例上重置列计数，相关详细信息请参阅嵌套部分。

例子

三列

可以使用.g-col-4类创建跨越所有视口和设备的三个等宽列。添加响应类以按视口大小更改布局。

.g-col-4

<div class="grid">
<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

使用响应类跨视口调整布局。在这里，我们从最窄的视口上的两列开始，然后在中等及以上视口上增加到三列。

.g-col-6 .g-col-md-4

<div class="grid">
<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

<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>

包装

当水平方向上没有空间时，栅格项目会自动换行到下一行。请注意，gap适用于栅格项目之间的水平间隙和垂直间隙。

.g-col-6

<div class="grid">
<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>

开始

Start类旨在替换默认网格的偏移量类，但它们并不完全相同。开始类从1开始，因为0是这些属性的无效值。

.g-col-3 .g-start-2

.g-col-4 .g-start-6

<div class="grid">
<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的直接子项）上没有类时，每个网格项的大小将自动调整为一列。

<div class="grid">
<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

<div class="grid">
<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覆盖默认的列数。
在第一个“自动”列中，将继承列计数，并且每列为可用宽度的三分之一。
在第二个auto列中，我们将嵌套的.grid上的列数重置为12（默认值）。
第三个自动列没有嵌套内容。

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

First auto-column

Auto-column

Second auto-column

6 of 12

4 of 12

2 of 12

Third auto-column

<div class="grid" 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变量没有默认值；相反，它们应用在提供本地实例之前使用的回退值。一旦设置该值，.grid实例将使用该值，而不是回退值1。

没有网格类

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

Auto-column

<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>

列和间隙

调整列数和间距。

.g-col-2

<div class="grid" 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" 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

<div class="grid" 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来更改垂直间隙。请注意，我们在.grids上使用gap，但可以根据需要修改row-gap和column-gap。

.g-col-6

<div class="grid" 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

<div class="grid" 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。这里有两个选项：

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

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

14 columns

.g-col-4

<div class="grid" 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>