html - CSS照片网格布局问题

Question

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

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

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

应用于此图像 div

 <div class=”photogrid”&gt;
    <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 照片网格布局。对此有什么帮助吗？

标签： htmlcssimagecss-grid

Answer 1

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