:::grid 是本博客的图片画廊容器指令。它将普通的 Markdown 图片排列在具有一致纵横比的响应式网格中，并自动启用灯箱（lightbox）查看功能。可将其用于文章配图、屏幕截图、作品集或小型相册。
同一画廊中的图片使用相同的卡片比例。默认情况下，居中裁剪会填满每个卡片并保持每行整齐；点击图片可在灯箱中打开完整的原图。每个画廊都有自己的灯箱组，不会与文章中的其他图片混合。
这篇文章既是功能文档，也是视觉测试页面。请在桌面、平板和移动设备宽度下查看这些示例，然后点击任意图片以验证灯箱分组。
极简语法
直接在 :::grid 和闭合的 ::: 之间编写 Markdown 图片：
:::grid
:::每张图片必须独占一个段落，图片之间需留有一行空白。画廊中只能包含图片；请将段落、列表和代码块写在容器外部。
以下是极简语法的结果。在没有参数的情况下，网格默认使用三列、16/10 的比例以及 cover（覆盖）填充模式。
参数一览
将所有参数写在起始指令后的花括号中：:::grid{parameter="value"}。
| 参数 | 允许的值 | 默认值 | 作用 |
|---|---|---|---|
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"}
:::以下结果使用了上述的三列横向语法。请比较卡片比例、列数，以及标题（title）如何优先于替代文本（alt text）作为图片说明显示：
图片说明与替代文本 (Alt Text)
图片的替代文本既用作无障碍替代文本，也用作其默认的图片说明。当图片具有可选的标题时，将优先使用该标题作为图片说明：
在同一行中，图片说明对齐到每个卡片的底部。换行的图片说明不会导致其他说明浮动在不同的高度。像 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的四列”中的纵向图片完全可见，带有空白区域且未被裁剪。 - 五列和六列网格在宽屏上保留其指定的列数，然后根据响应式规则折叠为两列或一列。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时