具有css的响应性lightroom样式网格？

最简单的图像库布局之一是带有居中图像的方形网格，如下面的Adobe Lightroom屏幕截图

有许多类似的问题，但所有这些都涉及到正方形图像和正方形网格。我的更一般，因为它包含矩形图像和方形网格

我花了很长时间试图使用css flexbox和inline box精确地再现下面的屏幕截图，但始终无法准确地居中：

flex:jsfiddle.net/rmodrak/4sxzkonr/

内联块：jsfiddle.net/rmodrak/wmunqzL6/

很难相信css本身不支持这样的布局。我错过什么了吗

试试这个：

编辑：添加响应性布局

/*如此相关*/ 身体{ 背景：121212； 颜色：白色； } /*容器样式*/ 容器{ /*重要的*/ 宽度：25%； 最小宽度：220px；/*200px+分容器边缘x 2+分容器填充x 2*/ 最小高度：220px；/*此处相同*/ 显示：内联块； 边框：1px纯红；/*如果要添加边框，请使用方框大小，请参见下文*/ 盒子尺寸：border box；/*你好，我是盒子尺寸男*/ 填充：0； 保证金：0； 浮动：左； } /*子容器样式*/ 分包商{ /*重要的*/ 宽度：200px； 高度：200px； 位置：相对位置； 左：50%； -ms转化率：translateX-52.5%； 转化率：translateX-52.5%； /*如此相关*/ 背景：22222； 填充物：5px； 保证金：5px； } 分包商{ /*重要的*/ 显示：块； 最大高度：100%； 最大宽度：100%； 保证金：0自动； 位置：相对位置； 最高：50%； 转化：translateY-50%； } /*使其在小型设备上具有响应能力*/ @仅媒体屏幕和最大宽度：910px{容器{宽度：33.3%；} @仅媒体屏幕和最大宽度：690px{容器{宽度：50%；} @仅媒体屏幕和最大宽度：470px{容器{宽度：100%；} 漂亮的照片，漂亮的盒子。 现在响应速度提高100%

---

非常有帮助，谢谢。我注意到右手边通常有额外的空间。是否可以将其修改为响应性图库？我已将标题更改为包含响应性图库。很抱歉不清楚。我想这完全回答了我的书面问题。