title: How do I get CSS Grid column widths to match the content?
body: <p><strong>My problem:</strong> I can't figure out how to get CSS grid track widths to auto-size to image content. </p>
  
  <p>Here's <strong><a href="https://codepen.io/simspace-dev/pen/bLQpxJ" rel="nofollow noreferrer">my CodePen</a></strong> that shows the problem I describe below:   </p>
  
  <p>I have several <code>&lt;div&gt;</code> elements using the same CSS class which defines a CSS grid. </p>
  
  <p>Each <code>&lt;div&gt;</code> element represents a row that can contain a varying number of images. The image widths will be the same per row, there will not be rows of mixed image widths.</p>
  
  <p>One row may contain two images that are <code>178px</code> wide. </p>
  
  <p>Another row may contain five images that are <code>133px</code> wide. </p>
  
  <p>I want the gap between all columns to be <code>10px</code> wide. However, as seen in my <a href="https://codepen.io/simspace-dev/pen/bLQpxJ" rel="nofollow noreferrer">Codepen</a>, all the columns in each row end up <code>178px</code> wide. The grid tracks with the <code>133px</code> images end up <code>178px</code> wide creating a huge gap.</p>
  
  <p>Can this be done with one CSS grid class? Or do I need to define different CSS grid classes for the different width images?</p>