| 类名 | 样式 |
|---|---|
| .grid-cols-1 | grid-template-columns: 1fr; |
| .grid-cols-2 | grid-template-columns: repeat(2, 1fr); |
| .grid-cols-3 | grid-template-columns: repeat(3, 1fr); |
| .grid-cols-4 | grid-template-columns: repeat(4, 1fr); |
| .grid-cols-6 | grid-template-columns: repeat(6, 1fr); |
| .grid-cols-subgrid | grid-template-columns: subgrid; |
| .grid-cols-fill | grid-column: 1 / -1; |
| .grid-auto-flow-row | grid-auto-flow: row; |
| .grid-auto-flow-column | grid-auto-flow: column; |
| .grid-auto-flow-dense | grid-auto-flow: dense; |
概览
使用网格工具来控制 CSS 网格布局的行为。这些工具可与 Bootstrap 的 CSS 网格布局系统 一起使用，以管理列数和自动排列算法。
CSS 网格是可选择的。 要使用这些工具，你需要通过在你的 Sass 配置中设置 $enable-cssgrid: true 来启用 CSS 网格系统。有关更多详细信息，请参阅我们的 CSS 网格文档。
列数
使用 grid-cols-{value} 工具通过修改 --bs-columns CSS 变量来设置 CSS 网格容器中的列数。Bootstrap 的 CSS 网格系统开箱即用支持 3、4 和 6 列布局。
列
列
列
列
列
列
<div class="grid text-center grid-cols-3">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>列
列
列
列
<div class="grid text-center grid-cols-4">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>列
列
列
列
列
列
<div class="grid text-center grid-cols-6">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>这些工具类设置了 --bs-columns CSS 变量：
.grid-cols-3 {
--bs-columns: 3;
}
.grid-cols-4 {
--bs-columns: 4;
}
.grid-cols-6 {
--bs-columns: 6;
}
填充列
使用 grid-cols-fill 通过设置 grid-column: 1 / -1 来使网格项跨越网格容器的整个宽度。
列
列
列
列
全宽列
列
列
<div class="grid text-center" style="--bs-columns: 4;">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div class="grid-cols-fill">Full width column</div>
<div>Column</div>
<div>Column</div>
</div>
<div class="grid" style="--bs-columns: 4;">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div class="grid-cols-fill">Full width column</div>
<div>Column</div>
<div>Column</div>
</div>
子网格
使用 grid-cols-subgrid 可以让嵌套的 .grid 继承父网格的列轨道，而不是生成自己均分的列，通过设置 grid-template-columns: subgrid。
在下面的例子中，父网格的三列大小不均（2fr 1fr 1fr）。最后一行的嵌套网格使用 grid-cols-subgrid 与相同的列轨道对齐，而不是拆分为自己的三列相等的列。
列（2份）
列（1份）
列（1份）
子网格列 (2fr)
子网格列 (1fr)
子网格列 (1fr)
<div class="grid text-center" style="grid-template-columns: 2fr 1fr 1fr;">
<div>Column (2fr)</div>
<div>Column (1fr)</div>
<div>Column (1fr)</div>
<div class="grid grid-cols-subgrid" style="grid-column: 1 / -1;">
<div>Subgrid column (2fr)</div>
<div>Subgrid column (1fr)</div>
<div>Subgrid column (1fr)</div>
</div>
</div>
.grid-cols-subgrid {
grid-template-columns: subgrid;
}
自动流
使用grid-auto-flow工具类控制自动放置的项目如何插入网格。
行（默认）
使用 grid-auto-flow-row 按顺序填充每一行来放置物品，必要时添加新行。
项目 1
项目 2
项目 3
第4项
第5项
<div class="grid text-center grid-auto-flow-row" style="--bs-columns: 3;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>专栏
使用 grid-auto-flow-column 通过依次填充每一列来放置物品，必要时添加新列。
项目 1
项目 2
项目 3
第4项
项目5
<div class="grid text-center grid-auto-flow-column" style="--bs-rows: 3; --bs-columns: 3;">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</div>密集
使用 grid-auto-flow-dense 来使用“密集”打包算法，该算法会尝试在网格中尽早填充空洞，如果后来出现较小的物品。
项目 1（跨 2）
项目 2
项目 3
项目 4
项目 5（跨 2）
<div class="grid text-center grid-auto-flow-dense" style="--bs-columns: 3;">
<div class="g-col-2">Item 1 (spans 2)</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div class="g-col-2">Item 5 (spans 2)</div>
</div>
.grid-auto-flow-row {
grid-auto-flow: row;
}
.grid-auto-flow-column {
grid-auto-flow: column;
}
.grid-auto-flow-dense {
grid-auto-flow: dense;
}
响应式
所有的网格工具类都是响应式的，并包含所有断点。
列数
.grid-cols-3.grid-cols-4.grid-cols-6.grid-cols-fill.grid-cols-subgrid.sm:grid-cols-3.sm:grid-cols-4.sm:grid-cols-6.sm:grid-cols-fill.sm:grid-cols-subgrid.md:grid-cols-3.md:grid-cols-4.md:grid-cols-6.md:grid-cols-fill.md:grid-cols-subgrid.lg:grid-cols-3.lg:grid-cols-4.lg:grid-cols-6.lg:grid-cols-fill.lg:grid-cols-subgrid.xl:grid-cols-3.xl:grid-cols-4.xl:grid-cols-6.xl:grid-cols-fill.xl:grid-cols-subgrid.2xl:grid-cols-3.2xl:grid-cols-4.2xl:grid-cols-6.2xl:grid-cols-fill.2xl:grid-cols-subgrid
自动流
.grid-auto-flow-row.grid-auto-flow-column.grid-auto-flow-dense.sm:grid-auto-flow-row.sm:grid-auto-flow-column.sm:grid-auto-flow-dense.md:grid-auto-flow-row.md:grid-auto-flow-column.md:grid-auto-flow-dense.lg:grid-auto-flow-row.lg:grid-auto-flow-column.lg:grid-auto-flow-dense.xl:grid-auto-flow-row.xl:grid-auto-flow-column.xl:grid-auto-flow-dense.2xl:grid-auto-flow-row.2xl:grid-auto-flow-column.2xl:grid-auto-flow-dense
CSS
Sass 工具 API
网格工具在我们的工具类 API 中的 scss/_utilities.scss 声明。了解如何使用工具类 API。
"grid-column-counts": (
responsive: true,
property: grid-template-columns,
class: grid-cols,
values: (
"1": 1fr,
"2": repeat(2, 1fr),
"3": repeat(3, 1fr),
"4": repeat(4, 1fr),
"6": repeat(6, 1fr),
subgrid: subgrid,
)
),
"grid-columns": (
responsive: true,
property: grid-column,
class: grid-cols,
values: (
fill: #{"1 / -1"},
)
),
"grid-auto-flow": (
responsive: true,
property: grid-auto-flow,
class: grid-auto-flow,
values: row column dense
),