Bootstrap 5 CSS Grid 布局完全指南

2026-06-30 ·

Bootstrap 5.2 开始原生支持 CSS Grid 布局模式，这一特性在 5.3 中得到进一步完善。本文将详细介绍如何在 Bootstrap 项目中使用 CSS Grid，以及与经典 Flexbox 网格的对比和组合策略。

启用 CSS Grid 布局

在 Bootstrap 5 中启用 CSS Grid 布局只需要在 row 上添加 .row-cols-* 类，或者使用 .g-* 间距类配合 CSS Grid 实现更灵活的布局：

<div class="container">
    <!-- 使用 CSS Grid 的响应式列布局 -->
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5>卡片一</h5>
                    <p>自动自适应布局</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5>卡片二</h5>
                    <p>无需手动设置列宽</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5>卡片三</h5>
                    <p>响应式断点自动适配</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5>卡片四</h5>
                    <p>每行自动 4 列</p>
                </div>
            </div>
        </div>
    </div>
</div>

与 Flexbox 网格的区别

特性	Flexbox 网格	CSS Grid 模式
最佳场景	一维布局（行或列）	二维布局（行列同时）
列宽控制	.col-* 指定列数	.row-cols-* 指定每行列数
垂直对齐	.align-items-*	Grid 原生对齐属性
列排序	.order-*	.order-*（相同）
自动列宽	.col 自动均分	.col 自动均分
跨行/跨列	不直接支持	原生 Grid 支持

实战：CSS Grid 卡片展示页

以下是一个完整的 CSS Grid 卡片展示页面示例：

<section class="container py-5">
    <h2 class="text-center mb-5">产品展示</h2>
    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
        <!-- 每个产品卡片 -->
        <div class="col">
            <div class="card h-100 shadow-sm">
                <img src="product.jpg" class="card-img-top" alt="产品">
                <div class="card-body">
                    <h5 class="card-title">产品名称</h5>
                    <p class="card-text text-secondary">产品描述</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-primary">¥99</span>
                        <button class="btn btn-sm btn-outline-primary">购买</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 重复更多卡片... -->
    </div>
</section>

关键点：

• row-cols-2 — 移动端每行 2 列
• row-cols-md-3 — 平板每行 3 列
• row-cols-lg-4 — 桌面每行 4 列
• g-4 — 间距为 4 级（1.5rem）
• h-100 — 卡片高度一致，适合网格布局

实战：博客首页杂志布局

CSS Grid 非常适合创建杂志风格的混合布局：

<div class="container py-5">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <!-- 特色文章，占两列 -->
        <div class="col" style="grid-column: span 2;">
            <div class="card border-0 shadow-sm">
                <div class="row g-0">
                    <div class="col-md-6">
                        <img src="featured.jpg" class="img-fluid rounded-start h-100" style="object-fit: cover;" alt="特色文章">
                    </div>
                    <div class="col-md-6">
                        <div class="card-body">
                            <h3>特色文章标题</h3>
                            <p>特色文章摘要内容...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 三个普通文章列 -->
        <div class="col">
            <div class="card h-100">...</div>
        </div>
        <div class="col">
            <div class="card h-100">...</div>
        </div>
        <div class="col">
            <div class="card h-100">...</div>
        </div>
    </div>
</div>

混合使用 Flexbox 和 CSS Grid

在实际项目中，Flexbox 和 CSS Grid 并非二选一，而是互补的布局工具：

• 页面级布局：使用 CSS Grid 定义整体页面结构（header、sidebar、main、footer）
• 卡片/列表：使用 CSS Grid 的 .row-cols-* 创建均分布局
• 组件内部：使用 Flexbox 实现导航栏、按钮组、卡片内容等一维排列
• 表单布局：使用 CSS Grid 的表单标签-输入框对齐

Sass 配置

Bootstrap 的 CSS Grid 支持通过 Sass 变量控制：

// 启用 CSS Grid
$enable-cssgrid: true;

// 自定义断点
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

// 自定义列数
$grid-columns: 12;

@import "bootstrap/scss/bootstrap";

注意：启用 CSS Grid 后，.col-* 类将使用 CSS Grid 而非 Flexbox 实现。

常见问题

CSS Grid 和 Flexbox 网格可以混用吗？

可以。Bootstrap 的 Flexbox 网格类（.col-md-6）和 CSS Grid 类（.row-cols-md-2）可以共存。推荐在卡片列表、产品展示等场景使用 CSS Grid，在导航栏、表单、按钮组等场景使用 Flexbox。

CSS Grid 模式下的间距如何控制？

使用 .g-*（gap）类控制间距，与 Flexbox 网格的间距类完全一致，支持 .g-0 到 .g-5，以及水平和垂直方向的 .gx-* 和 .gy-*。

跨列（span）怎么实现？

目前 Bootstrap 没有提供 .col-span-* 工具类，需要通过内联样式 style="grid-column: span 2;" 实现，或者自定义 CSS 类。这是 Bootstrap CSS Grid 模式的一个局限性。

总结

Bootstrap 的 CSS Grid 模式为布局提供了更多选择：

• 使用 .row-cols-* 快速创建均分布局，无需手动计算列宽
• CSS Grid 适合二维布局场景，Flexbox 适合一维排列
• 两者可以混合使用，发挥各自优势
• 通过 Sass 变量 $enable-cssgrid 开启

查看 布局文档 了解更多布局方式。