javascript - CSS Grid每行不同数量的项目

Question

我试图在 CSS 网格上重新创建以下分布，但我没有到达那里。

我尝试了以下方法：

display: inline-grid;
grid-template-columns: auto auto;

但是列在所有网格中获得最大的元素宽度。

我想做的是用最多的元素填充行，因为我可以尊重元素的纵横比和每行的最大高度。

我不知道这是否可以使用 CSS 网格或者我应该使用其他 CSS 布局？

我制作了一个 JS 脚本来执行此操作，但我试图用 CSS 做出相同的行为以获得更好的性能和更少的错误。

每行的编辑高度可能不同，以调整比率并防止图像裁剪。

谢谢

标签： javascripthtmlcssgrid