title: CSS grid - remove elements with jQuery so they don't take up space
body: <p>So I have a css grid layout with "boxes" inside, that I filter with a text input and javascript. How can I hide the filtered out elements so that they don't even take up space within the grid (so the shown elements slide to the front) with jQuery?</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>jQuery.expr[':']['contains-insensitive'] = function(a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) &gt;= 0;
  };
  var $box = $('.box');
  $('#search').on('input', function(e) {
    $box.show();
    $('.title').filter(`:not(:contains-insensitive('${this.value}'))`).closest('.box').hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
           display: grid;
           grid-gap: 20px;
           grid-template-columns: repeat(auto-fill, minmax(80px, 1fr) ) ;
            background-color: red;
          }</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;input type="text" id="search" /&gt;
  &lt;div class="content"&gt;
              &lt;a&gt;
                  &lt;div class="box"&gt;
                      &lt;p class="title"&gt;John&lt;/p&gt;
                      Other content.
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a&gt;
                  &lt;div class="box"&gt;
                      &lt;p class="title"&gt;Jack&lt;/p&gt;
                      Other content.
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a&gt;
                  &lt;div class="box"&gt;
                      &lt;p class="title"&gt;Jane&lt;/p&gt;
                      Other content.
                  &lt;/div&gt;
              &lt;/a&gt;
              &lt;a&gt;
                  &lt;div class="box"&gt;
                      &lt;p class="title"&gt;Jenny&lt;/p&gt;
                      Other content.
                  &lt;/div&gt;
              &lt;/a&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>