title: CSS-grid auto-flow: dense not working
body: <p><strong>You can think of this as we upload multiple pictures (may be of different dimensions) on Facebook and they display them nicely, in their newsfeed.</strong></p>
  
  <p>I have a container <code>.wrapper</code> it contains a <code>CSS-grid</code> layout box having class <code>.card-img-grid</code>. It can have a maximum for 4 images, but they will be of different  <code>width</code> and <code>height</code>, i.e., some will have a square shape, some will be long in either direction(vertically or horizontally). Totally depends on how a user has uploaded.</p>
  
  <p>My problem is due to the difference in the size of images grid, is creating the white gaps, which is ruining my complete UX. Please help me, how can I fix that or there is another way to achieve <strong>Facebook</strong> type layout for multiple images?</p>
  
  <p>I want the grid to adjust on its own according to the images. Also, I cannot use<br>
  <code>grid-column: span 2;grid-row: span 2;</code> like properties, becoz I don't know abt how big or small images are. Working codepen <a href="https://codepen.io/anon/pen/VBJxBo" rel="nofollow noreferrer">demo</a></p>
  
  <p><strong>My Angular Template</strong></p>
  
  <pre><code>&lt;div class="card-img-grid"&gt;
    // Loop will be displaying only 4 images, but can have different size
    &lt;ng-container *ngFor="let img of feed.images | slice: 0 : 4"&gt;
       &lt;div class="img-grid-item"&gt;
         &lt;img class="w-100" [src]="img.url"&gt; // .w-100 sets width: 100%
        &lt;/div&gt;
     &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><code>.wrapper {
    max-width: 500px;
  }
  
  .card-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 4px;
    grid-auto-flow: dense;
    margin: 14px 0 5px;
  }
  .card-img-grid .img-grid-item {
    overflow: hidden;
    cursor: pointer;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/KG7bh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KG7bh.png" alt="My layout"></a></p>