title: Getting columns to wrap in CSS Grid
body: <p>How can you specify the maximum number of columns when using <code>display: grid;</code>, with it automatically breaking when the content becomes too wide for the space (or smaller than a minimum size)? Is there a way to do this without media queries?</p>
  
  <p>For example, I have the following which won't break into a single column mode when there is not enough room for the content. </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>#grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
  }
  
  #grid &gt; div {
    background-color: #ccddaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="grid"&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
    &lt;div&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>