title: Responsive CSS Grid with persistent aspect ratio
body: <p>My goal is to create a responsive grid with an unknown amount of items, that keep their aspect ratio at 16 : 9.
  Right now it looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 160px);
      grid-template-rows: 1fr;
      grid-gap: 20px;
   }
  .item {
      height: 90px;
      background: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
          &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is, that the items won't scale with the screen size, resulting in a margin at the right site. But when making the grid adapt to the screen size with e.g.: <code>grid-template-columns: repeat(auto-fit, minmax(160p, 1fr))</code> and removing the <code>height: 90px;</code>, the aspect ratio doesn't persist.</p>
  
  <p>Maybe there is a better solution without css grid? (Maybe using javascript)</p>