.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
:::grid 是本博客的图片画廊容器指令。它能将普通的 Markdown 图片以统一的宽高比排列成响应式网格，并自动启用灯箱查看功能。适用于文章配图、截图、作品集或小型相册。
同一画廊中的图片使用相同的卡片比例。默认情况下，居中裁剪会填满每张卡片，使每一行保持整齐；点击图片可在灯箱中打开完整原图。每个画廊都有自己独立的灯箱分组，不会与文章中的其他图片混在一起。
本文既是功能文档，也是一个视觉测试页面。请分别在桌面、平板和手机宽度下查看示例，然后点击任意图片验证灯箱分组。
最简语法
直接在 :::grid 和结尾的 ::: 之间编写 Markdown 图片：
:::grid
:::每张图片必须独占一个段落，图片之间用空行分隔。画廊中只放图片；段落、列表和代码块请写在容器之外。
下面是最简语法的效果。不带参数时，网格默认使用三列、16/10 比例和 cover 模式。
参数一览
所有参数写在开始指令后的花括号中：:::grid{参数="值"}。
| 参数 | 允许的值 | 默认值 | 作用 |
|---|---|---|---|
columns | 1 到 6 的整数 | 3 | 桌面端每行的列数。无效值会回退为 3。 |
aspect | 正数比例，如 16/9、3/4 或 1/1 | 16/10 | 展示的卡片比例，而非原图比例。 |
fit | cover、contain | cover | 图片适配模式。cover 裁剪以填满；contain 保留完整图片，可能留白。 |
完整示例：
:::grid{columns="3" aspect="16/9" fit="cover"}
:::下面的效果使用了上方的三列横图语法。请对比卡片比例、列数，以及标题优先于替代文字作为图片说明的方式：
图片说明与替代文字
图片的替代文字既是无障碍替代文本，也是默认的图片说明。当图片带有可选标题时，标题会取代替代文字作为图片说明：
同一行中，所有卡片的图片说明都会底部对齐。某条说明换行时，其他说明不会浮动到不同的高度。像 3:4 和 16:9 这样的比例文字可以直接写在正文、标题和替代文字中，无需转义。
这个示例演示了默认的替代文字说明、显式的标题说明，以及较长说明的底部对齐效果：
布局与裁剪
桌面端布局使用 columns 指定的列数。宽度低于 768px 时，网格最多使用两列；低于 480px 时切换为单列。卡片容器固定 aspect 比例并裁剪圆角，图片会填满卡片，不带主题默认的图片外边距。
- 选择
cover：推荐的默认值。图片从中心裁剪以填满卡片，使画廊看起来整齐一致。 - 选择
contain：完整显示原图，不做裁剪。当图片比例与卡片不同时会露出主题背景；适用于不能裁剪的图片。 - 若想既保留完整图片又不留白，可将
aspect设置为接近原图比例，或将图片单独放入一个网格。
下面的示例将相同的竖图分别以 cover 和 contain 放入 16/9 卡片。前者会裁剪图片；后者保留完整图片并留出背景空间。
:::grid{columns="3" aspect="16/9" fit="cover"}
:::
:::grid{columns="3" aspect="16/9" fit="contain"}
:::
默认配置
不带属性时，默认是三列、16/10 比例和 cover 裁剪。这三张竖图用于验证默认裁剪和图片说明。
:::grid
:::三列竖图：3:4
使用 aspect="3/4" 时，三张竖图会填满比例一致的竖向卡片。如果原图比例不同，cover 会从中心裁剪其边缘。
:::grid{columns="3" aspect="3/4"}
:::三列横图：16:9
这一组演示了三列布局下常见的视频封面比例。当横图接近卡片比例时，裁剪量极小。
:::grid{columns="3" aspect="16/9"}
:::
两列方图：1:1
需要更大的预览卡片时，两列布局很合适。第三张图片会移到下一行。最后一行会保持网格轨道的宽度，而不是拉伸图片填满整行。
:::grid{columns="2" aspect="1/1"}
:::
四列与 contain
fit="contain" 不会裁剪原图。当图片比例与卡片比例不同时，会露出主题背景。这是有意为之，不是布局问题。它同时也验证了四列网格与独立灯箱分组互不干扰。
:::grid{columns="4" aspect="16/9" fit="contain"}
:::单列大图
当图片需要更大的阅读尺寸时，适合使用单列。它在桌面、平板和手机上都保持单列，并且仍可在灯箱中查看原图。
:::grid{columns="1" aspect="16/9"}:::稀疏的五列行
五列用于验证更高的支持列数。只有三张图片时，最后一行保持左对齐，而不是拉伸图片。
:::grid{columns="5" aspect="1/1"}
:::六列混合图片
六列是当前的最大列数。混合横图和竖图可以验证 cover 裁剪、窄卡片上的图片说明以及密集的桌面布局。为了保证文章内容的可读性，通常两到四列更为合适。
:::grid{columns="6" aspect="1/1"}
:::四列方图：1:1
四张比例相同的方图是典型的四列布局。桌面端一行显示全部四张；平板收缩为两列，手机则为单列。
:::grid{columns="4" aspect="1/1"}
:::
六列横图：16:9
六列横图非常适合缩略图预览、作品集和截图索引。即使原图比例略有差异，cover 也能让每张 16/9 卡片填充得整齐一致。
:::grid{columns="6" aspect="16/9"}
:::
三列竖图组：3:4
这组六张竖图演示了人物、海报或手机截图的常见布局。图片排成两行三列，说明文字底部对齐。
:::grid{columns="3" aspect="3/4"}
:::
边缘含关键内容：cover 与灯箱
这些图片的边缘附近含有重要的文字或细节。cover 能保持网格整齐，但可能裁掉这些边缘；点击图片即可在灯箱中查看未裁剪的原图。对边缘敏感的图片请使用清晰的说明文字，或使用下文的 contain。
:::grid{columns="3" aspect="16/9" fit="cover"}
:::
极端比例与 contain
对于横幅、长截图等比例极端的图片，contain 会显示完整原图。与 cover 不同，它可能留出主题背景空间，但绝不会裁剪内容。
:::grid{columns="3" aspect="16/9" fit="contain"}
:::
透明图片
透明图片会露出卡片的主题背景。这个单列 contain 示例便于检查透明区域、原图边缘和灯箱行为。
:::grid{columns="1" aspect="16/9" fit="contain"}:::
灯箱导航
点击网格中的任意图片即可打开 Fancybox 灯箱。在灯箱中可以缩放、旋转、进入全屏、查看缩略图，并使用方向键导航。导航范围仅限当前的 :::grid 容器：例如，点击「16:9 测试图片一」只会浏览该小节中的另外两张横图。
同一篇文章中的普通 Markdown 图片仍然单独处理，不会被加入任何网格画廊。
检查清单
- 每个网格中的图片尺寸一致，说明文字位于卡片下方。
- 悬停时图片轻微缩放；点击后可以缩放、旋转并使用键盘导航。
- 点击「16:9 测试图片一」后，灯箱只能浏览该小节中的另外两张横图。
- 宽度低于 768px 时，网格最多两列；低于 480px 时为单列。
- 「四列与
contain」中的竖图完整可见，有留白且无裁剪。 - 五列和六列网格在宽屏上保持指定列数，然后按响应式规则收缩为两列或单列。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时