CSS照片网格布局问题答案

【问题标题】：CSS photo grid layout issueCSS照片网格布局问题
【发布时间】：2020-12-20 04:05:25
【问题描述】：

最近，在使用 wix 进行了一些成本分析后，我决定从头开始对我的网站进行编程，并意识到与托管网站并自己制作相比，它的成本太高了。

在我的主页上，我试图在照片网格布局中显示 4 张图像。但是，每次我尝试输入 CSS 命令时：

.photogrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 300px 300px 300px;
}

应用于此图像 div


 <div class=”photogrid”>
    <img src="/Users/dominicsinicrope/Documents/Website/Img gallery/Personal Stationery.png">
    <img src="/Users/dominicsinicrope/Documents/Website/Img gallery/BJW stationery.png">
    <img src="/Users/dominicsinicrope/Documents/Website/Img gallery/Canvas Tote Bag MockUp.png">
    <img src="/Users/dominicsinicrope/Documents/Website/Img gallery/Flyover Coffee Bags.png">
  </div>```

我得到一个堆叠在一起的图像列表，而不是 3x2 照片网格布局。有什么帮助吗？

【问题讨论】：

您可以在我当前用作原型的免费 wixsite 上查看照片网格的最终预期外观：domsinicrope.wixsite.com/domsinicrope
您包含的代码是连续的而不是堆叠的。它也不是您想要的，但如果我们没有看到相同的东西，您可能有其他 CSS 正在影响显示，也可能影响任何解决方案。您还有其他可能导致这种情况的原因吗？另外，如果你不熟悉 CSS 网格（如果你从它开始，可能会很费脑子），那么我建议你看看 Bootstrap 网格——它更容易使用。

标签： html css image css-grid

【解决方案1】：

试试这个 CSS：

.photogrid img {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px 300px 300px;

}

【讨论】：

这和我放的没区别？
这是试图将图像本身变成网格显示 - 这是行不通的！
试试这个 CSS: .photogrid{ display: grid;网格模板列：重复（8、1fr）；网格模板行：重复（8、5vw）；网格间隙：15px； } .photogrid img{ 宽度：100%;高度：100%；适合对象：封面； }
@DeepSojitra 它不工作，我只有一列，也没有网格间隙。
@FluffyKitten 那你建议我做什么？

【解决方案2】：

我找到了解决方案。我所做的只是在“photogrid”中创建一个单独的 div，一切都很好。

【讨论】：