Filter items CSS grid position re-adjusment animations : <p>I have a react app that filters a bunch of items in a css grid layout.</p>

<p>When un-filtered  the grid contains all the items.</p>

<pre><code>&lt;div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>Once a filtered is applied the grid of items will get smaller</p>

<pre><code>&lt;div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>If another filter is removed there may be more.</p>

<pre><code>&lt;div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
  &lt;div class="product"&gt;&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>How can I apply transition animations for grid items to slide into place when grid items disappear or reappear?</p>
