title: How to shrink-wrap a css grid?
body: <p>Assuming the following grid layout:</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>div {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 1em;
    border: 5px solid green;
    margin: 50px;
  }
  h3 {
    grid-column: 1 / -1;
    margin: 0;
  }
  span {
    background-color: pink;
  }
  h3, span {
    padding: 0.5em;
  }
  span + span {
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h3&gt;1. A heading here&lt;/h3&gt;
    &lt;span&gt;some text here&lt;/span&gt;
    &lt;span&gt;some  more text here as well thanks&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would like to 'shrink-wrap' the grid items so that </p>
  
  <p>1) the maximum width of the grid will only be as wide as the content, but </p>
  
  <p>2) if there's not enough room for the content - the items will wrap accordingly.</p>
  
  <p>In the above demo, the <strong>first</strong> constraint fails - the grid columns stretch to fit their respective content and all the <em>extra</em> viewport width is split equally (added) between the columns.</p>
  
  <p><a href="https://codepen.io/danield770/pen/LOLpmW?editors=1100" rel="nofollow noreferrer"><strong>Codepen demo</strong></a> - (Resize to see what I'm talking about)</p>
  
  <p>I've tried a few approaches to fix this, but they all 'shrink-wrap' the grid items as apposed to the actual grid itself:</p>
  
  <p>1) Set <code>max-content</code> as the track length instead of <code>auto</code></p>
  
  <pre><code>grid-template-columns: max-content max-content;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-row-gap: 1em;
    border: 5px solid green;
    margin: 50px; 
  }
  h3 {
    grid-column: 1 / -1;
    margin: 0;
  }
  span {
    background-color: pink;
  }
  h3, span {
    padding: 0.5em;
  }
  span + span {
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h3&gt;1. A heading here&lt;/h3&gt;
    &lt;span&gt;some text here&lt;/span&gt;
    &lt;span&gt;some text here&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>2) Set <code>justify-content: flex-start;</code> on the grid container</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: grid;
    grid-template-columns: auto auto;
    grid-row-gap: 1em;
    border: 5px solid green;
    margin: 50px; 
    justify-content: flex-start;
  }
  h3 {
    grid-column: 1 / -1;
    margin: 0;
  }
  span {
    background-color: pink;
  }
  h3, span {
    padding: 0.5em;
  }
  span + span {
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h3&gt;1. A heading here&lt;/h3&gt;
    &lt;span&gt;some text here&lt;/span&gt;
    &lt;span&gt;some text here&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>3) Add a bogus 3rd column which fills the remaining viewport width with an empty third column:</p>
  
  <pre><code>grid-template-columns: auto auto 1fr;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-row-gap: 1em;
    border: 5px solid green;
    margin: 50px; 
  }
  h3 {
    grid-column: 1 / -1;
    margin: 0;
  }
  span {
    background-color: pink;
  }
  h3, span {
    padding: 0.5em;
  }
  span + span {
    background-color: salmon;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h3&gt;1. A heading here&lt;/h3&gt;
    &lt;span&gt;some text here&lt;/span&gt;
    &lt;span&gt;some text here&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So how would I 'shrink-wrap' the grid?</p>