如果您在 Discourse 帖子中包含了很多图片，现在可以自动将它们排列成一个漂亮的网格。您只需将它们包装在 [grid] ... [/grid] 标签中，图片就会整齐地排列。这是此提交的核心功能，已在所有 Discourse 实例中启用。
以下是实际示例：
此功能类似于一些主题组件（Masonry Image Gallery, https://meta.discourse.org/t/tiles-image-gallery/81950）。主要区别在于网格中图片的排列将同时在元素的顶部和底部对齐。一些额外的技术说明：
通过点击撰写器预览中一组图片旁边的切换图标，也可以启用或禁用网格：
此帖子中的图片来自 unsplash.com
太棒了。很喜欢这个。谢谢你 @pmusaraj 
我们已在使用 Masonry Image Gallery；这项新功能兼容吗，还是现有的网格会消失？
好问题。这个新的核心功能与 Masonry Image Gallery 主题组件不兼容，也就是说，两者不能同时工作。
如果你想将帖子从 Masonry gallery 方法迁移到新的核心方法，你需要运行一个脚本来更新帖子的 raw 内容，从
<div>
</div>
到
[grid]
[/grid]
然后重新烘焙这些帖子。
太棒了！这是一个巨大的进步，让帖子中的图片看起来更漂亮了。
我猜这不会以任何方式影响缩略图主图的选择，对吧？
正确，这不应该影响它。我相信帖子中找到的第一张图片被选为缩略图（不包括头像和表情符号等）。另外，我无法想象出现这种情况：上传的第一张图片不是网格中的第一张图片（重新排序只能发生在列表中的后续图片）。
我有一个导入，其中的图片只是指向 S3 存储桶的 URL，例如：
[grid]
https://urlsite/pic.jpg
https://urlsite/pic.jpg
[/grid]
但它只显示 [grid] 然后是图片，然后是 [/grid]。
我猜只有在那些 URL 被下载并转换为常规图片后才能正常工作？
嗯，是的，在编辑器中，这目前也仅适用于上传。 （也就是说，在编辑器中粘贴图像 URL 并将其包装在 [grid] 标签中也不起作用。）
太好了。幸好我还没把那段代码加到导入脚本里。
这是一个很棒的功能，谢谢。
网格是否可以与_已发布的页面_一起使用？
抱歉，这不适用于已发布的页面。类似的 JavaScript 驱动的帖子功能也不适用于已发布的页面（灯箱、投票、目录）。
您能否提供这方面的说明？
你好 bart 
这应该可以正常工作。显然，请先备份，并仔细检查之前的砌体帖子中是否有任何不希望的结果…
posts = Post.where('raw LIKE ?', '%<div>data-masonry-gallery</div>%')
posts.each do |p|
p.update!(raw: p.raw.gsub(/<div>data-masonry-gallery</div>(.*?<\/div>)/m, '[grid]\1[/grid]'))
p.rebake!
end
谢谢，看起来很棒 
我也使用了 Masonry Image Gallery 组件…
启用了自动设置后… 这不包含原始的 <div> data-masonry-gallery</div>，所以我认为脚本将无法工作。但在这种情况下，它们之间没有冲突。
有什么计划使其自动生成网格吗？如果这样做了，我就可以简单地重新烘焙帖子并保留网格布局。在此之前，我认为我可以隐藏网格按钮并安全地使用主题组件。
CDCK 有人能影响 Chrome 开发者吗？网格（Grid）的 CSS Masonry 支持？
Masonry 本来就应该是 CSS 的东西。它是少数几种能够以一种不错的方式来尊重图像集合（或任何项目内容）的不同纵横比的布局之一。
到处都用 JavaScript 来运行这个，真是浪费且毫无意义……
（而且正如你所知，Firefox 已经（在标志后面）支持了，Safari 的技术预览版现在也支持了："masonry）" | Can I use... Support tables for HTML5, CSS3, etc
顺便说一句，大家，请 
这个 issue：
https://bugs.chromium.org/p/chromium/issues/detail?id=1076027&q=masonry&can=2
Chrome 和 Edge 现在支持 CSS Masonry 了！
据我所知没有。
我对 Safari 支持 masonry 感到兴奋，它们在将功能从草案 → 实验 → 完全支持方面有着更好的记录。Firefox 的 masonry 支持已经处于一个标志后面 2 年多了。Safari 的支持可能会是推动 Chrome 跟进的主要动力。
已完成！
是的，但不能没有 [grid] 标签。在不使用标签的情况下自动将图片转换为网格将违反 CommonMark 规范，我们非常希望避免这种情况。（在我首次内部草拟此功能时，我确实从自动网格开始。）
相反，我一直在考虑的下一步是，我们可以自动为上传的多张图片（可能是 3 张或更多）添加 [grid] 包装器。这对于移动端上传尤其有用，在移动端手动添加标签很麻烦，而且如果你一次从手机上传 3 张或更多图片，它们很可能是照片，并且适合网格布局。
我们还没有关于何时添加此功能的计划，但这绝对是我们希望做的事情。
尽管如此，仍应有可能从 JavaScript 生成静态 HTML 并发布“已处理”的 DOM，以实现诸如此网格和目录之类的有用功能。
仅有渲染后的 HTML 并不足够。网格、目录和类似功能还需要与 HTML 交互以创建这些功能的 JavaScript。而该 JavaScript 存在于 Ember 应用中，无法轻松提取到非 Ember 的已发布页面上。
我昨天刚试用了这个功能，有人建议我在这里的帖子里分享我的反馈和想法……
总而言之，这是一个很棒的新选项，可以在不让图像占据整个帖子的空间的情况下添加多张图像:slight_smile: