title: Fully responsive items with CSS grid and auto-fit minmax
body: <p>The use of <code>grid-template-columns: repeat(auto-fit, minmax(600px, 1fr))</code> makes it easy to build a responsive CSS grid. The container will be filled with as many elements fit into a row, without using a media query.</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>.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  
  .item {
    height: 100px;
    background: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the items are wider than the screen when the screen is smaller than the min-value specified in <code>minmax()</code>. You can fix this by adding a media query at <code>400px</code>, but this only works when you know that there's no content around the container. And that's almost impossible when the container could be placed anywhere.</p>
  
  <p><strong>Is there a way or property to tell the items that they should never be wider than 100%?</strong></p>
  
  <p>Something like: Fill the container with as many 400px items as possible, but ensure that non of them gets wider than 100% of the width of the container.</p>
  
  <p><a href="https://codepen.io/electerious/pen/gogWLE" rel="nofollow noreferrer">CodePen Demo</a></p>