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<h3>用 <code>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 自带这个工具类<p>非对称图片墙真正的麻烦不在写几行 CSS，而在于设计阶段就要明确哪些图必须放大、哪些允许压缩，以及小屏下是否保留非对称——这些决策会直接影响 <code>grid-template-areas 的维护成本。