title: CSS grid responsive from a given max width and aspect ratio
body: <p>I've an issue with CSS Grid.
  I define a grid </p>
  
  <pre><code>.cover {
    max-width: 1080;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
  }
  </code></pre>
  
  <p>And inside this grid I have some blocks </p>
  
  <pre><code>.horizontal {
    grid-column: span 2;
    grid-row: span 1;
  }
  .large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .vertical {
    grid-column: span 1;
    grid-row: span 2;
  }
  .small {
    grid-column: span 1;
    grid-row: span 1;
  }
  </code></pre>
  
  <p>Every block has an image inside, and I have only two variables: the max width of the grid, 1080px, and the aspect ratio of the small block, 360 x 280.
  How to have this grid responsive keeping the aspect ratio of the blocks?</p>
  
  <p>My html is easy</p>
  
  <pre><code>&lt;div class="cover"&gt;
   &lt;div class="horizontal"&gt;&lt;/div&gt;
   &lt;div class="small"&gt;&lt;/div&gt;
   &lt;div class="small"&gt;&lt;/div&gt;
   &lt;div class="horizontal"&gt;&lt;/div&gt;
   &lt;div class="small"&gt;&lt;/div&gt;
   &lt;div class="small"&gt;&lt;/div&gt;
   &lt;div class="small"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>