title: Make column in CSS Grid dynamic width as small as possible to fit context
body: <p>Is it possible to make some columns in CSS Grid flexible width, to fit the size of its content?</p>
  
  <p>Like on the picture - it's a list item, image on the left, and small info in the top right corner should be of <strong>dynamic width</strong> and fit the size of the content, two other areas should take all the available space.</p>
  
  <p><a href="https://i.stack.imgur.com/8qK3M.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8qK3M.jpg" alt="enter image description here"></a></p>
  
  <p>It's important to have <strong>dynamic width that fits its content</strong> for those two areas, and not fixed width like x-times smaller than the default grid row.</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-container {
    display:             grid;
    grid-template-areas: 'small1 big1 small2'
                         'small1 big2 big2';     
  }
  
  .grid-container &gt; .small1 { grid-area: small1 }
  .grid-container &gt; .small2 { grid-area: small2 }
  .grid-container &gt; .big1   { grid-area: big1 }
  .grid-container &gt; .big2   { grid-area: big2 }
  
  .grid-container &gt; * { 
    margin: 5px; 
    padding: 5px; 
    border: 1px solid black; 
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-container"&gt;
    &lt;div class="small1"&gt;small1&lt;br/&gt;small1&lt;br/&gt;small1&lt;/div&gt;
    &lt;div class="small2"&gt;small2&lt;/div&gt;
    &lt;div class="big1"&gt;big1&lt;/div&gt;
    &lt;div class="big2"&gt;big2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>