网格自动流动密集，无法消除项目之间的间隙

Question

我试图消除网格间隙，认为可能与此有关，但并不能解决任何问题。所有图像似乎都按照它们在HTML中的顺序排列。我以为他们应该重新安排以消除所有差距。问题是我不希望项目之间有空隙，我希望所有项目都紧密贴合在一起。

这是我的代码中有关问题的部分：

html

body {
font-family: 'Arial', sans-serif;
background-color: #f3f3f3;
overflow-x: hidden;
}

css

<div class="Gallery">
    <img src="images/amp.jpg" class="img big">
    <img src="images/car.jpg" class="img ">
    <img src="images/bwp1.jpg" class="img ">
    <img src="images/street.jpeg" class="img big">
    <img src="images/mtn.jpg" class="img big">
    <img src="images/window.jpg" class="img big">
    <img src="images/streetphoto.jpg" class="img big">
</div>

Answer 1

您写道：

  

所有图像似乎都按照它们在HTML中的顺序排列。我以为他们应该重新安排以消除所有差距。

仅当商品小于空白时，他们才会重新安排。

网格规格：

  

§ 7.7. Automatic Placement: the grid-auto-flow property

     

密集

     

如果指定，自动放置算法将使用“密集”包装   算法，如果出现以下情况，会尝试尽早在网格中填充孔   较小的物品稍后出现。这可能导致项目出现   乱码，这样做会填补较大物品留下的空缺。

     

^{（重点是我的）}

您写道：

  

问题是我不希望项目之间有空隙，我希望所有项目都紧密贴合在一起。

查看此信息：CSS-only masonry layout