CSS照片网格布局问题

Question

最近，在用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的照片网格布局。有什么帮助吗？

Answer 1

试试这个CSS:

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

}

Answer 2

我找到了解决方案。我所做的只是在"；光电栅格"；一切都很好。