是否可以制作无尽的 CSS 网格来创建画廊

Question

尊敬的开发人员，

我想创建一个带有画廊的投资组合网站，类似于在 instagram 上找到的一个连续 3 张图片的网站。为此，我尝试使用 css-grid。网格看起来像这样：（请注意，225px 列/行是白色边界，类似于路路通）

grid-template-columns: 225px repeat(3, 1fr) 225px;
grid-template-rows: 225px auto;

图库上方有两个标题元素：

#header-l{grid-row: 1 / 1; grid-column: 2 / 2;}

和

#header-r{grid-row: 1 / 1; grid-column: 3 / span 2;}

这就是我目前得到的状态。但是，为了显示画廊，需要为网格容器指定一个高度。我用过

min-height: 100vh;

但是，当我将项目添加到画廊的第三行时，单元格不会保持其高度，而是会降低一半。

========

我想要实现的是一个系统，我可以在其中添加无限数量的图像，每行三行，所有图像的纵横比都是 1:1。

完整的代码可以在这里找到：https://jsfiddle.net/timlwsk/xqfat628/1/

编辑：错字

Answer 1

嗯，有多种方法可以实现您的目标。首先我测试了你的代码。如果您可以使用一些随机的 Unsplash 图像更新图像会很酷，因为您在 jsfiddle 上看不到任何本地图像。但是，如果您添加网格 3/2/3/2、3/3/3/3、...，即使使用 4，它似乎在小提琴上也能正常工作。但是让我给你一些替代方案。

解决方案 1： -> 创建行，这样您的网格就可以在您创建新行时从 1/2/1/2 开始。在您的情况下，您的网格是在一个容器中定义的，因此您希望为每一行复制该容器（中等不错）

解决方案 2： -> 您可以在网格中创建一个 div，其尺寸为 2-4，在此 div 内，您可以创建另一个宽度为 calc(100%/3) 的 div (img-wrapper) 并使其成为内联块（还要在顶部和底部添加一些边距）。通过这种方式，您可以创建任意数量的图像对象，甚至可以很容易地在移动设备上进行调整。就像@media screen 和 (max-width:500px) img-wrapper{ width: 100%}。这可能是您的最佳解决方案

解决方案 3： -> 找一个bootstrap之类的库，其实你可以在variables.scss文件中调整任何你想要的东西