在GitHub上查看

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
.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
.g-col-6 .g-col-md-4
.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
.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
.g-col-6
.g-col-6
.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的直接子项)上没有类时,每个网格项的大小将自动调整为一列。

1
1
1
1
1
1
1
1
1
1
1
1
<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
1
1
1
1
1
1
<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
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
Auto-column
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
.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
Auto-column
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-gapcolumn-gap

.g-col-6
.g-col-6
.g-col-6
.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
.g-col-6
.g-col-6
.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>