Javascript 使用react、样式化组件等动态创建具有n行和n列的css网格/flexbox图像库

我想尝试重新创建一个图像库，该图像库根据阵列中的图像数量有n行，但每行的列/图像可以是一个大图像、两个小图像或3个甚至更小的图像。看起来他们正在使用flexbox和css网格，但我的大脑在试图弄清楚这是如何做到的。它看起来几乎是随机生成的，在1、2或3个图像宽的列上，但每次加载页面时都是相同的结果。我不熟悉css网格和flexbox，所以很难弄清楚它们是如何根据图像数量动态生成此布局的。我正在使用react、样式化组件、css网格、flexbox等

图像库和互动展示示例：

他们使用的网格似乎有7列

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr

我假设行是自动生成的，但让我大吃一惊的是列

网格中的每个单元格或项目都可以有

网格列：

开始/结束

1/7

用于大图像或

1/4

然后

4/7

用于两个并排图像或

1/3

3/5

5/7

三幅并排图像

---

有人知道这样的效果是如何动态实现的吗？

我不认为我们讨论的是css网格（不是普通的css）。也许他们正在使用类似于

---

您可以根据页面大小定义不同的布局并在它们之间切换，这不是一个简单的CSS。更好地使用JS库，就像是的，这很有意义。是否也可以用bootstrap来实现呢？我认为它有能力创建断点。我正在努力弄清楚他们是如何布置网格的，因为它看起来几乎是随机的，但会在断点处发生变化，所以我认为它不是硬编码的模式。在我看到的所有参考资料中，似乎您必须故意设置每一行，这就是我努力想弄清楚他们是如何做到这一点的。除非他们使用的是自定义算法。