title: CSS Grid responsive layout with auto-fit and minmax for even number of items
body: <p>What I am trying to accomplish:</p>
  <p>There are 4 grid items. At the a widest screen size, I would like the items to be lined up in a row:</p>
  <p>item_1 item_2 item_3 item_4</p>
  <p>As the screen width shrinks, I would like the items to wrap to the next row like this:</p>
  <p>item_1 item_2</p>
  <p>item_3 item_4</p>
  <p>Then finally at the narrowest, I would like the times to be a single columns</p>
  <p>item_1</p>
  <p>item_2</p>
  <p>item_3</p>
  <p>item_4</p>
  <p>I found an example which does this but by only wrapping the next item when it can – <a href="https://labs.jensimmons.com/2017/03-009.html" rel="nofollow noreferrer">https://labs.jensimmons.com/2017/03-009.html</a></p>
  <p>Building off of that I tried using nested grid containers based on the example's model:</p>
  <pre><code>grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  </code></pre>
  <p>HTML</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-css lang-css prettyprint-override"><code>  .outer_grid {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
        grid-template-row:1fr 1fr;
        grid-gap:1em;
        border:5px solid blue;
      }
  
      .grid {
        display:grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-row:1fr 1fr;
        grid-gap:1em;
        border:5px solid green;
        height:200px;
      }
  
      .item {
        border:2px solid red;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="outer_grid"&gt;
        &lt;div class="grid"&gt;
          &lt;div class="item"&gt;item 1&lt;/div&gt;
          &lt;div class="item"&gt;item 2&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="grid"&gt;
          &lt;div class="item"&gt;item 3&lt;/div&gt;
          &lt;div class="item"&gt;item 4&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It is nearly working (codepen below) but I'm not sure if this is the right approach or if there is a better way to accomplish this. I have tried using Flexbox too but chose CSS Grid because of the grid-gap feature. Also, I know it can be done but I am trying to do this without media queries.</p>
  <p><a href="https://codepen.io/anon/pen/LMqWEr?editors=1100" rel="nofollow noreferrer">https://codepen.io/anon/pen/LMqWEr?editors=1100</a></p>