Html CSS照片网格布局问题

最近，我决定用wix做一些成本分析后，从头开始编程我的网站，我意识到，与托管网站和自己制作相比，这太贵了

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

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

应用于此图像分区

 <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的照片网格布局。对此有任何帮助吗？

尝试使用此CSS：

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

---

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

您可以在我当前的免费wixsite上查看照片网格的最终预期外观，我将其用作原型：domsincrope.wixsite.com/domsincrope您包含的代码是一行而不是堆叠的。这也不是你想要的，但如果我们没有看到相同的东西，你可能会有其他CSS影响显示，也可能影响任何解决方案。你还有其他可能导致这一切的原因吗？另外，如果你不熟悉CSS网格（如果你刚开始使用它，你的头脑可能会变得很复杂），那么我建议你看看引导网格-它更容易使用。这和我提出的没有区别？这是试图将图像本身变成网格显示-这是行不通的！尝试使用以下CSS：.photogrid{display:grid；grid template columns:repeat（8，1fr）；grid template rows:repeat（8，5vw）；grid gap:15px；}.photogrid img{width:100%；height:100%；object fit:cover；}@DeepSojitra它不工作，我只有一列，也没有网格间隙。@FluffyKitten那你建议我怎么做？