Bootstrap 5 默认不支持 CSS Grid 布局类，图片墙需自定义 .photo-grid 容器并配合 grid-template-areas 实现非对称布局，辅以媒体查询响应式切换和 object-fit: cover 等样式保障显示效果。
Bootstrap 5 默认不提供 CSS Grid 布局类
Bootstrap 5 的 .row 和 .col-* 基于 Flexbox，不是 CSS Grid；想做非对称图片墙（比如 2×1 大图 + 周围小图），不能靠 col-6 + col-3 硬拼——那样是等宽栅格，无法实现跨行/跨列的自由组合。
必须手动写 CSS Grid 规则，再用 Bootstrap 的工具类辅助间距、响应式断点或图片样式。
- 不要试图用
col-span或row-span类——Bootstrap 5 根本没有这些 - 可以保留
img-fluid控制图片缩放，用mx-auto居中，但布局容器必须脱离.row/.col - 推荐把图片墙单独抽成一个自定义容器，比如
<div class="photo-grid">，再配 CSS
用 grid-template-areas 定义非对称区域
比纯 grid-template-columns/rows 更直观，尤其适合固定结构的图片墙（如首页精选区）。每个图片对应一个命名区域，用字符串拼出视觉布局。
/* 示例：3 行 × 3 列，中间大图占满第 2 行 */
.photo-grid {
display: grid;
grid-template-areas:
"a b c"
"d d d"
"e f g";
gap: 0.5rem;
}然后给每张图加 class="area-a" 这样的类，并在 CSS 中绑定：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
.area-a { grid-area: a; }
.area-b { grid-area: b; }
.area-d { grid-area: d; } /* 这个会自动横跨三列 */-
grid-template-areas中空格分隔列，换行分隔行；重复字母表示跨单元格 - 区域名只能是字母、数字、短横线，不能有空格或下划线
- 所有
grid-area值必须和grid-template-areas中出现的字母完全一致
响应式切换布局要用 @media 重写 grid-template-areas
Bootstrap 的 sm/md 断点不能直接作用于 Grid 区域定义——grid-template-areas 不支持媒体查询内联语法。必须手写媒体查询块。
@media (max-width: 768px) {
.photo-grid {
grid-template-areas:
"a"
"b"
"c"
"d"
"e"
"f"
"g";
}
}- 别指望
col-12能触发 Grid 重排——它只影响 Flexbox 列宽 - 移动端建议改用单列流式布局，避免小屏上区域挤压变形
- 如果图片尺寸差异大，记得给
img加object-fit: cover防止拉伸失真
图片尺寸不一致时，用 grid-auto-rows + minmax() 控制行高
纯 grid-template-rows: 200px 300px 200px 会导致内容溢出或留白；更稳妥的是让 Grid 自动分配，同时设最小高度。
.photo-grid {
grid-template-areas: "a b c";
grid-auto-rows: minmax(200px, auto);
gap: 0.5rem;
}-
minmax(200px, auto)表示每行至少 200px，内容多就自动撑高 - 避免用
height: 100%强制截断，容易切掉图片关键部分 - 若某张图需固定比例（如 4:3），可套一层
<div class="ratio ratio-4x3">—— Bootstrap 5 自带这个工具类
非对称图片墙真正的麻烦不在写几行 CSS，而在于设计阶段就要明确哪些图必须放大、哪些允许压缩，以及小屏下是否保留非对称——这些决策会直接影响 grid-template-areas 的维护成本。
