grid-auto-flow dense not removing gaps between items

Question

I've tried removing the grid gap, thinking that could have something to do with it, but it didn't solve anything. All images seem to be staying in the order they are in the HTML. I thought they were supposed to rearrange to remove all gaps. The problem is I don't want a gap between items, and I want all items to fit snugly together.

Here's the parts of my code concerning a problem:

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

Answer 1

You wrote:

All images seem to be staying in the order they are in the HTML. I thought they were supposed to rearrange to remove all gaps.

They will only re-arrange if the item is smaller than the gap.

Grid spec:

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

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

^{(emphasis mine)}

You wrote:

The problem is I don't want a gap between items, and I want all items to fit snugly together.

See this post: CSS-only masonry layout