使用反应、样式组件等重新创建具有 n 行和列的动态 css 网格/flexbox 图像库答案

【问题标题】：Recreating a css grid/flexbox image gallery with n rows and columns that are dynamic using react, styled components etc使用反应、样式组件等重新创建具有 n 行和列的动态 css 网格/flexbox 图像库
【发布时间】：2020-10-12 18:30:14
【问题描述】：

我想尝试重新创建一个图像库，它具有基于数组中图像数量的行数，而且每行的列/图像可以是单个大图像、两个较小的图像或 3 个甚至更小的图像.看起来他们正在使用 flexbox 和 css 网格，但我的大脑在试图弄清楚这是如何完成的。它几乎似乎是在 1、2 或 3 个图像宽的列上随机生成的，但每次加载页面时结果都是相同的。我是 CSS 网格和 flexbox 的新手，因此很难弄清楚它们如何根据图像数量动态生成此布局。我正在使用 react、styled-components、css grid、flexbox 等。

图片库和互动展示示例： https://imgur.com/9n5vo3l

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

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

我假设这些行是自动生成的，但让我失望的是列。

网格中的每个单元格或项目都可以有grid-column: 的开始/结束 1/7 用于大图或 1/4 然后4/7 用于两个并排图像或 1/3 3/5 5/7 三个并排的图像

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

【问题讨论】：

这不是一个普通的 CSS。更好的使用 JS 库，比如miromannino.github.io/Justified-Gallery

标签： javascript css reactjs flexbox css-grid

【解决方案1】：

我不认为我们在谈论 css 网格（无论如何都不是 vanilla css）。也许他们正在使用类似https://github.com/STRML/react-grid-layout

您可以根据页面大小定义不同的布局并在它们之间切换

【讨论】：

是的，这是有道理的。是否也可以使用引导程序完成？我认为它具有创建断点的能力。我正在努力弄清楚他们是如何布置他们的网格的，因为它看起来几乎是随机的，但会在断点处改变，所以这让我认为它不是硬编码模式。在我看到的所有资源中，您似乎必须刻意设置每一行，这就是我如何努力弄清楚他们是如何做到这一点的。除非这是他们使用的自定义算法。