title: Filling empty cells in CSS Grid Layout
body: <p>I have a set of div tiles that I've arranged through the CSS Grid Layout as "automatically" as possible; my final idea is that even if I don't know how many tiles there are, they all get sized and placed correctly. This is working fine.</p>
  
  <p>Now, I'm looking to double the area of any tile that is clicked on. As far as I know, that means increasing the span of this tile:</p>
  
  <pre><code>grid-row: span 2;
  grid-column: span 2;
  </code></pre>
  
  <p>I'm happy with the results if I click on any tile that is not in the right-most column. When the rightmost tiles get expanded, they are wrapped down onto the next line.</p>
  
  <p>Is there any way to force these tiles to expand to the left, so that other non-active tiles are wrapped instead?</p>
  
  <p>Codepen example <a href="https://codepen.io/f2theogle/pen/RgeKvG" rel="noreferrer">here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('div.tile').click(function() {
    $('div.tile').not(this).removeClass('chosen');
    $(this).toggleClass('chosen');
    
    /*
  Attempt to find current placement, to see if we could change the span rules based on results. Probably disregard.
    */
    var colCount = $('div.wrapper').css('grid-template-columns').split(' ').length;
    console.log(colCount);
    
    var placement = $(this).css('grid-row');
    console.log(placement);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background-color: #eee;
  }
  
  .wrapper {
    display: grid;
    margin: 18px;
    
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    grid-auto-rows: 286px;
    grid-gap: 18px;
  }
  
  .tile {
    position: relative;
    background-color: #eee;
    background-color: #149;
    
    text-align: center;
    box-shadow:
      0 3px 12px rgba(0,0,0, 0.15),
      0 4px 6px rgba(0,0,0, 0.25);
  }
  .tile.chosen {
    grid-row: span 2;
    grid-column: span 2;
  }
  .tile.chosen::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: " ";
    background-color: rgba(255,255,255,.2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="tile"&gt;A&lt;/div&gt;
    &lt;div class="tile"&gt;B&lt;/div&gt;
    &lt;div class="tile"&gt;C&lt;/div&gt;
    &lt;div class="tile"&gt;D&lt;/div&gt;
    &lt;div class="tile"&gt;E&lt;/div&gt;
    &lt;div class="tile"&gt;F&lt;/div&gt;
    &lt;div class="tile"&gt;G&lt;/div&gt;
    &lt;div class="tile"&gt;H&lt;/div&gt;
    &lt;div class="tile"&gt;I&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>