是否可以制作一个无穷无尽的CSS-grid来创建一个图库
Is it possible to make an endless CSS-grid to create a gallery
尊敬的开发人员，
我想创建一个带有画廊的作品集网站，类似于在 Instagram 上找到的连续 3 张图片的网站。为此，我尝试使用 css-grid。网格看起来像这样：（请注意，225px column/row 是一个白色边界，类似于路路通）
grid-template-columns: 225px repeat(3, 1fr) 225px;
grid-template-rows: 225px auto;
图库上方有两个 header 元素：
#header-l{grid-row: 1 / 1; grid-column: 2 / 2;}
和
#header-r{grid-row: 1 / 1; grid-column: 3 / span 2;}
这就是我目前的状态。但是，为了让画廊显示出来，需要为 grid-container 指定一个高度。我用了
min-height: 100vh;
但是，当我将项目添加到图库的第三行时，单元格不会保持其高度而是变高一半。
========
我想要实现的是一个系统，我可以在其中以三行的形式添加无限数量的图像，所有图像的纵横比都为 1:1.
完整代码可以在这里找到：https://jsfiddle.net/timlwsk/xqfat628/1/
编辑：打字错误
好吧，有多种方法可以实现您的目标。首先我测试了你的代码。如果你能用一些随机的 Unsplash 图像更新图像会很酷，因为你在 jsfiddle 上看不到任何本地图像。但是，如果您添加网格 3/2/3/2、3/3/3/3，...即使使用 4，它似乎在 fiddle 上也能正常工作。但是让我给你一些选择。
解决方案一：
-> 创建行，这样您的网格就可以在您创建新行的任何时候从 1/2/1/2 开始。在您的情况下，您的网格是在一个容器中定义的，因此您希望为每一行复制该容器（中等好）
方案二：
-> 您可以在网格中创建一个尺寸为 2-4 的 div，在这个 div 中，您可以创建另一个 div（img-wrapper），其宽度为：calc( 100%/3) 并使其成为内嵌块（同时在顶部和底部添加一些边距）。通过这种方式，您可以根据需要创建任意数量的图像对象，甚至可以针对移动设备轻松调整它。就像@media screen 和 (max-width:500px) img-wrapper{ width: 100%} 一样。这可能是最适合您的解决方案
方案三：
-> 寻找一个库，例如 bootstrap，您实际上可以在 variables.scss 文件
中调整任何您想要的内容
尊敬的开发人员，
我想创建一个带有画廊的作品集网站，类似于在 Instagram 上找到的连续 3 张图片的网站。为此，我尝试使用 css-grid。网格看起来像这样：（请注意，225px column/row 是一个白色边界，类似于路路通）
grid-template-columns: 225px repeat(3, 1fr) 225px;
grid-template-rows: 225px auto;
图库上方有两个 header 元素：
#header-l{grid-row: 1 / 1; grid-column: 2 / 2;}
和
#header-r{grid-row: 1 / 1; grid-column: 3 / span 2;}
这就是我目前的状态。但是，为了让画廊显示出来，需要为 grid-container 指定一个高度。我用了
min-height: 100vh;
但是，当我将项目添加到图库的第三行时，单元格不会保持其高度而是变高一半。
========
我想要实现的是一个系统，我可以在其中以三行的形式添加无限数量的图像，所有图像的纵横比都为 1:1.
完整代码可以在这里找到：https://jsfiddle.net/timlwsk/xqfat628/1/
编辑：打字错误
好吧，有多种方法可以实现您的目标。首先我测试了你的代码。如果你能用一些随机的 Unsplash 图像更新图像会很酷，因为你在 jsfiddle 上看不到任何本地图像。但是，如果您添加网格 3/2/3/2、3/3/3/3，...即使使用 4，它似乎在 fiddle 上也能正常工作。但是让我给你一些选择。
解决方案一： -> 创建行，这样您的网格就可以在您创建新行的任何时候从 1/2/1/2 开始。在您的情况下，您的网格是在一个容器中定义的，因此您希望为每一行复制该容器（中等好）
方案二： -> 您可以在网格中创建一个尺寸为 2-4 的 div，在这个 div 中，您可以创建另一个 div（img-wrapper），其宽度为：calc( 100%/3) 并使其成为内嵌块（同时在顶部和底部添加一些边距）。通过这种方式，您可以根据需要创建任意数量的图像对象，甚至可以针对移动设备轻松调整它。就像@media screen 和 (max-width:500px) img-wrapper{ width: 100%} 一样。这可能是最适合您的解决方案
方案三： -> 寻找一个库，例如 bootstrap，您实际上可以在 variables.scss 文件
中调整任何您想要的内容