企业官网建设流程全解析

• 教程
• 文档

导读

图片马赛克（image mosaic）是一种常见于相册页、作品集与商品展示场景的网格布局：多张图片以整齐的方格排列，其中部分图片跨两行或两列形成错落感。本文基于 30 seconds of code 仓库中的 image-mosaic.md 片段，完整拆解如何仅用display: grid、grid-row/column: span 2 / auto与媒体查询三类现代 CSS 特性，在不依赖任何 JavaScript 的情况下，构建一套自动适配屏幕宽度的响应式图片马赛克。读完本文，你将掌握该片段的每一行代码的含义、如何为网格中的特定卡片赋予"跨行/跨列"能力，以及如何搭配object-fit让图片在不同尺寸的格子中依然完美呈现。

为什么选择 CSS Grid 构建图片马赛克

CSS Grid 是当前构建复杂二维布局最强大的工具。相比浮动（float）布局需要借助 clearfix 清理副作用，相比 flexbox 擅长一维排列，Grid 可以同时控制行与列两个方向，天然适合"方阵 + 局部跨行跨列"的马赛克结构。

这一点在 30 seconds of code 的 CSS 布局集合中也有印证：集合说明文件 layout.yaml 将该片段归类到layout标签下，并明确描述集合覆盖了"使用 flexbox 和 grid 等现代技术创建常见布局"的方法。与仓库中基于滚动实现画廊的 horizontal-vertical-gallery.md 不同，马赛克片段追求的是"一张屏内铺满、随视口自适应"的静态网格，实现成本极低，是页面内相册最省事的选择。

核心布局代码逐行拆解

片段给出的样式只有短短 9 行，却同时解决了"自动列数""自动行高""卡片跨格"三个问题。逐行来看：

.image-mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; }

display: grid：将容器切换为网格布局，其直接子元素自动成为网格项（grid item），这是整个方案的地基。

gap: 1rem：设置行与列之间的间距。1rem等于根元素字号，随用户浏览器默认字号缩放，保证不同设备上的视觉比例一致。若需要更紧凑或更宽松的间距，可替换为0.5rem、2rem或像素值。

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))：这是整段代码的"自适应核心"，可拆为两层理解：

• minmax(240px, 1fr)定义每条列的宽度在240px到1fr（剩余空间的 1 份）之间取值；
• repeat(auto-fit, ...)让浏览器根据容器宽度自动计算能放下多少条这样的列。列越多、每条列均分剩余空间并尽量拉宽，直到无法再容纳一个240px的最小宽度为止。

两者的组合结果就是：无论视口多宽，网格总会生成"尽可能多且尽可能宽"的列，从而真正实现响应式，无需为每个断点单独编写列数规则。

grid-auto-rows: 240px：当没有显式声明行模板时，Grid 会自动创建隐式行，grid-auto-rows就用来指定这些自动生成的行的高度。这里统一为240px，与列的最小宽度一致，使每个格子接近正方形，马赛克观感更整齐。

需要说明的是，repeat(auto-fit, ...)是相对较新的 CSS 特性，使用前建议确认目标浏览器支持情况；若需兼容旧浏览器，可在前面追加一条使用固定列数的回退规则。

让特定图片跨越两行或两列：span 2 / auto

马赛克与普通网格相册的关键区别在于：部分卡片占据 2×2 甚至更大的面积，形成视觉焦点。片段借助网格项上的两个属性实现：

.card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; }

grid-row: span 2 / auto与grid-column: span 2 / auto采用"起始线 / 结束线"的完整语法：span 2表示该网格项横跨 2 条轨道（即占两行或两列），auto作为另一端的结束线，交由浏览器自动推算——即从当前自动放置（auto-placement）的位置起，向后延伸两个单位。相比简写grid-row: span 2，span 2 / auto显式声明了结束端，行为更明确稳定。

在实际页面中，只需给对应的图片卡片加上card-tall或card-wide类即可。横向卡片（card-wide）占用 2 列宽度，适合横幅图片；纵向卡片（card-tall）占用 2 行高度，适合竖幅图片。若需要 2×2 的大图块，可同时使用两个类，或直接添加grid-area: span 2 / span 2。

用媒体查询保护小屏体验

跨行跨列的效果在宽屏上赏心悦目，但在手机等窄屏上，列宽被压缩后的大卡片反而会挤压其他内容。因此片段特意将跨格样式包进媒体查询：

@media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } }

@media screen and (min-width: 600px)表示仅当视口宽度 ≥ 600px（通常对应横屏手机以上的设备）时，card-tall与card-wide才生效。在小于 600px 的屏幕上，所有卡片退化为统一的单格尺寸，配合auto-fit自动列数，布局依然整齐、可读。

这是一种值得复用的"移动优先"策略：默认保持简单，只在空间充足时叠加视觉效果。你可以按需调整断点值，例如改为min-width: 768px以匹配平板阈值。

完整可运行示例

将片段与一段简单的 HTML 组合，即可得到一个可实际运行的马赛克相册。假设容器内每个子元素都包含一张图片：

<div class="image-mosaic"> <div class="card-tall"><img src="portrait.jpg" alt="Portrait photo"></div> <div><img src="square-1.jpg" alt="Square photo 1"></div> <div class="card-wide"><img src="landscape.jpg" alt="Landscape photo"></div> <div><img src="square-2.jpg" alt="Square photo 2"></div> <div><img src="square-3.jpg" alt="Square photo 3"></div> </div>

.image-mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 240px; } @media screen and (min-width: 600px) { .card-tall { grid-row: span 2 / auto; } .card-wide { grid-column: span 2 / auto; } }

在桌面端，网格会根据容器宽度生成多列，card-tall与card-wide卡片分别纵向、横向展开；在手机端，所有卡片自动变为单格布局。原始片段中还提供了可交互的在线演示入口，详见 image-mosaic.md 原文。

让图片真正填满格子：搭配object-fit

马赛克的格子是固定的（240px行高），而原始图片的长宽比各不相同。若直接设置width: 100%; height: 100%，图片会被拉伸变形；若只设置宽度，行高固定又会导致溢出。这正是仓库中另一片段 fit-image-in-container.md 解决的问题：使用object-fit属性。

将示例中的img补充如下样式，即可让图片在不破坏自身比例的前提下铺满任意格子：

.image-mosaic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

• object-fit: cover：图片等比缩放直至完全覆盖容器，超出部分被裁切，格内永远不留空白；
• object-position: center：裁切时始终保留图片中央区域，避免焦点偏移；
• display: block：消除图片底部的内联元素空隙，防止格子下方出现细微偏差。

若更希望"整图可见、允许留白"，可改用object-fit: contain。这套组合同样是 30 seconds of code CSS 片段库中处理图片容器的标准做法。

进阶：延伸阅读与替代方案

马赛克网格本身已相当完善，但结合仓库内其他片段，可以进一步扩展：

• 需要"滚动查看"而非一屏铺满时，参考 horizontal-vertical-gallery.md，它展示了基于 flex +scroll-snap-type的横向/纵向滚动画廊，以及用少量 JavaScript 实现缩略图导航的完整方案；
• 需要处理容器内图片的精确位置与比例时，参考 fit-image-in-container.md 中对object-fit/object-position的讲解；
• 若整个页面采用 Grid 布局，可参考 footer-at-the-bottom.md 中grid-template-rows: 1fr auto的用法，理解fr单位如何分配剩余空间；
• 该片段所属的 CSS 布局集合完整清单见 layout.yaml，其中还收录了居中、清除浮动等常见布局技巧。

小结

通过 image-mosaic.md 这一个片段，你可以在十行以内完成一个生产可用的响应式图片马赛克：

1. display: grid开启网格布局，gap控制间距；
2. repeat(auto-fit, minmax(240px, 1fr))让列数随容器宽度自动伸缩；
3. grid-auto-rows: 240px统一隐式行高；
4. grid-row/column: span 2 / auto让指定卡片跨两行或两列；
5. @media (min-width: 600px)保证小屏上跨格样式不生效；
6. 搭配object-fit: cover让任意比例的图片完美填满格子。

整套方案无需 JavaScript、无外部依赖，代码量极小且易于嵌入任何现有样式表，是快速实现自适应相册与作品集的可靠选择。

• 教程
• 文档