网格自动流动密集不消除项目之间的差距答案

【问题标题】：grid-auto-flow dense not removing gaps between items网格自动流动密集不消除项目之间的差距
【发布时间】：2019-03-21 07:45:39
【问题描述】：

我已经尝试消除网格间隙，认为这可能与它有关，但它没有解决任何问题。所有图像似乎都保持在 HTML 中的顺序。我认为他们应该重新排列以消除所有间隙。问题是我不希望项目之间有间隙，我希望所有项目紧密地组合在一起。

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

html

<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>

css

    .Gallery{
      display:-ms-grid;
      display:grid;
      grid-gap: 10px;
      -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
      grid-auto-flow: dense;
    }                
    img {
      max-width: 100%;
    }

  .big{
    -ms-grid-column-span: 2;
    -ms-grid-column: auto;
        grid-column: auto/ span 2;
    -ms-grid-row-span: 2;
    -ms-grid-row: auto;
        grid-row: auto/span 2;
  }

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

你写的：

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

他们只会在项目小于的情况下重新排列。

网格规格：

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

密集

如果指定，自动放置算法使用“密集”包装算法，尝试在网格中较早地填充孔较小的项目稍后会出现。这可能会导致项目出现乱序，这样做会填补较大项目留下的漏洞。

^{（强调我的）}

你写的：

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

看到这个帖子：CSS-only masonry layout

【讨论】：