title: How do you prevent a grid item from overflowing the grid?
body: <p>I'm using the following to create a grid that scales from three columns to two, then one on mobile:</p>
  
  <pre><code>grid-template-columns: repeat(auto-fill(minmax(400px,1fr));
  </code></pre>
  
  <p>It works fine, except on mobile devices the min setting causes each item to overflow the grid container (and screen).</p>
  
  <p>Is there any other way I can write the columns to prevent this?</p>
  
  <p>i.e. "Minimum 400px, except if it overflows the parent container"</p>