title: CSS grid - maximum number of columns without media queries
body: <p>Is it possible to define a grid with a maximum number of columns, but allow elements to wrap onto new rows when the screen width changes?</p>
  <p>I have implemented classes that allow rows to wrap onto new rows, but there is no maximum number of columns.</p>
  <p>Here is <a href="https://en.wikipedia.org/wiki/CodePen" rel="nofollow noreferrer">a CodePen</a> of one method <a href="https://codepen.io/Ben-Gsy/pen/NJErRe" rel="nofollow noreferrer">using Flexbox</a>:</p>
  <p>CSS:</p>
  <pre><code>.flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  </code></pre>
  <p>Another method is to use <a href="https://codepen.io/Ben-Gsy/pen/OqaXgo" rel="nofollow noreferrer">a grid</a>:</p>
  <pre><code>.grid {
    display: grid;
    counter-reset: grid-items;
    position: relative;
  }
  
  
  .grid--auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  </code></pre>
  <p>I want a fairly generic solution to this. Is what I want to achieve possible without JavaScript or media queries?</p>