:::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设置为接近原始图片比例，或将图片单独放在一个网格中。
以下示例将相同的竖图分别放入 16/9 卡片中，使用 cover 和 contain。第一个裁剪图片；第二个完整保留图片并留有背景空间。
:::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”中的竖图完全可见，留有空白且无裁剪。 - 五列和六列网格在宽屏上保持指定的列数，然后根据响应式规则折叠为两列或一列。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时