:::grid 是博客图片库容器的指令。它将普通 Markdown 图像排列成响应式网格，保持一致的宽高比，并自动启用光箱查看功能。可以用它来制作文章图片、截图、作品集或小型相册。
同一画廊中的图片使用相同的卡片比例。默认情况下，中心裁剪会填满每张卡牌并保持每行整齐;点击图片会在灯箱中打开完整的原作。每个画廊都有自己的Lightbox组，不会和其他图片混在一起。
这篇文章既是功能文档，也是视觉测试页面。查看桌面、平板和移动端宽度的示例，然后点击任意图片验证光箱分组。
最小语法
直接在 :::grid 和 ::: 之间写Markdown图像:
:::grid
:::每张图片必须占据自己的段落，图片之间必须留一行空白。只在画廊中保留图片;在容器外写段落、列表和代码块。
这是最小语法的结果。在没有参数的情况下，网格默认使用三列、16/10 的比率和覆盖率。
参数一览
在开场指令后用大括号写下所有参数: :::grid{parameter="value"}.
| Parameter | Allowed values | Default | Purpose |
|---|---|---|---|
columns | 整数来自 1 to 6 | 3 | 桌面上每行的列数。无效值回退到 3. |
aspect | 正比率，例如 16/9, 3/4, or 1/1 | 16/10 | 显示的卡片比率，而不是原始图像比率。 |
fit | cover, contain | cover | 图像拟合模式。 cover 作物以填充; contain 保留完整图像，并可能留下空白 |
完整示例:
:::grid{columns="3" aspect="16/9" fit="cover"}
:::以下结果使用了上面的三列横向语法。比较卡片比例、列数以及标题优先于alt文本作为标题的方式：
标题和Alt文本
图像的alt文本既可以作为可访问的替代文本，也可以作为其默认标题。当图像具有可选标题时，标题将用作标题：
在同一行中，标题与每张卡片的底部对齐。包装说明不会使其他人漂浮在不同的高度。比例文本，如 3:4 和 16:9 ，可以直接写在正文、标题和alt文本中，而无需转义。
此示例演示了默认的alt文本标题、显式标题标题和较长标题的底部对齐方式：
布局和裁剪
桌面布局使用由列指定的列数。低于 768px ，网格最多使用两列；低于 480px 时，它们会切换到一列。卡片包装固定了纵横比并剪裁了圆角，而图像填充了卡片，没有主题的默认图像边距。
- 选择
cover: 推荐的默认值。图像从中心裁剪以填充卡片，使图库看起来一致。 - 选择
contain: 显示完整的原始图像而不`进行裁剪。当其比例与卡片不同时，主题背景仍然可见；将其用于无法裁剪的图像。 - 要保留完整图像而不留空白，请将
aspect设置为接近原始图像比率，或将图像放置在自己的网格中。
以下示例将相同的肖像图像放置在带封面和内容的 16/9 卡片中。第一批作物；第二种保留了完整图像并留下背景空间。
:::grid{columns="3" aspect="16/9" fit="cover"}
:::
:::grid{columns="3" aspect="16/9" fit="contain"}
:::
默认配置
如果没有属性，默认值为三列、 16/10 比率和覆盖裁剪。这三幅肖像图像验证了默认裁剪和字幕。
:::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"}
:::六列混合图像
五列验证了更高的支持列数。只有三张图像，最后一行保持左对齐，而不是拉伸图像。
:::grid{columns="6" aspect="1/1"}
:::四柱正方形: 1:1
具有相同比率的四个正方形图像是典型的四柱布局。桌面将所有四个显示在一行中；平板电脑可折叠为两列，移动为一列。
:::grid{columns="4" aspect="1/1"}
:::
六柱景观: 16:9
六个横向列适用于缩略图预览、作品集和屏幕截图索引。即使原始比率略有不同，封面也会始终如一地填充每张 16/9 的卡片。
:::grid{columns="6" aspect="16/9"}
:::
三柱肖像: 3:4
这组六张肖像图片展示了人物、海报或手机截图的常见布局。这些图像形成两行三行，标题与底部对齐。
:::grid{columns="3" aspect="3/4"}
:::
边缘关键内容: cover and Lightbox
这些图像在边缘附近包含重要的文本或细节。盖子可以保持网格整洁，但可能会修剪这些边缘；单击图像以在lightbox中查看未剪切的原稿。对边缘敏感的图像使用清晰的标题，或使用下面的“包含”。
:::grid{columns="3" aspect="16/9" fit="cover"}
:::
极端比率 contain
对于横幅、长截图和其他极端的图像比例，包含完整的原始显示。与封面不同，它可能会留下主题背景空间，但永远不会裁剪内容。
:::grid{columns="3" aspect="16/9" fit="contain"}
:::
透明图像
透明图像显示了卡片的主题背景。这个包含单个列的示例使透明区域、原始边缘和灯箱行为易于检查。
:::grid{columns="1" aspect="16/9" fit="contain"}:::
灯箱导航
单击网格中的任何图像以打开Fancybox灯箱。在那里，您可以缩放、旋转、进入全屏、查看缩略图和使用箭头键导航。导航仅限于当前的:::grid 例如<单击> “16:9测试图像一” 仅打开该部分中的另外两个横向图像。
同一帖子中的普通Markdown图片继续单独处理；它们不会添加到任何网格库中。
清单
- 每个网格中的图像具有一致的尺寸，卡片下方有标题。
- 图像在悬停时略微缩放；点击后，可以用键盘缩放、旋转和导航。
- 点击 “16:9测试图像一” ，灯箱仅浏览该部分中的另外两个景观图像。
- 低于768px，网格最多使用两列；在480px以下，他们使用一列。
- “四列包含” 中的肖像图像完全可见，没有空白，也没有裁剪。
- 五列和六列网格在宽屏幕上保留其指定的列数，然后根据响应规则折叠为两列或一列。
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时