title: How to make images stay within the rows of a css grid container?
body: <p>The code below shows the intended behavior when I resize the window in
  Chrome 60, and in Firefox 55 (but not in iOS Safari 10.3; that is most likely another question why it misbehaves in Safari). </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>html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: lightgrey;
  }
  
  .container {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, calc((60vh - 12px)/3));
    /*grid-template-rows: 1fr 1fr 1fr;*/
    /*grid-template-rows: auto auto auto;*/
    height: 60vh;
    border: 3px solid yellow;
    padding: 3px;
    /*grid-gap: 20px;*/ /* &lt;-- would also mess things up */
  }
  
  .tile {
  }
  
  img {
    box-sizing: border-box;
    display: block;
    object-fit: contain;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    padding: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- The image is 200 x 100 px: a green and a blue square next to each other. --&gt;
   &lt;div class="container"&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
     &lt;div class="tile"&gt;
       &lt;img src="https://i.stack.imgur.com/qbpIG.png" alt="." /&gt;
     &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is important that the aspect ratio of the images (2:1)</p>
  
  <p><a href="https://i.stack.imgur.com/qbpIG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qbpIG.png" alt="dummy image"></a></p>
  
  <p>is preserved. I would have expected either:</p>
  
  <pre><code>grid-template-rows: 1fr 1fr 1fr;
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>grid-template-rows: auto auto auto;
  </code></pre>
  
  <p>makes the images fit within the rows of the grid, but neither of them does.
  With:</p>
  
  <pre><code>grid-template-rows: repeat(3, calc((60vh - 12px)/3));
  </code></pre>
  
  <p>I get the desired behavior. <strong>How can I avoid working out the math myself?</strong> In other words, what should I do so that <code>grid-template-rows: 1fr 1fr 1fr;</code> (or something similar) works?</p>
  
  <p>It is already difficult to work out the height of the container element in CSS on the real page. The goal is to solve it with CSS grid layout; no JavaScript, and no background image hacks.</p>
  
  <hr>
  
  <p><strong>Update:</strong> I originally excluded the background image hack for two reasons. </p>
  
  <ol>
  <li><p>I thought (due to some misunderstandings) that the background image
  url must be in the CSS file, but this is not the case: I can use
  inline styles and have it in the HTML.</p></li>
  <li><p>It felt hackish. After having seen how complicated and messy it gets
  with nested flex containers nested inside a grid container just to make         it work on Safari, I simply resorted to the background image hack as it is <em>significantly</em> cleaner and works in all browsers tested (Chrome, Firefox, Safari).</p></li>
  </ol>
  
  <p>In the end, it is not the accepted answer that helped to solve my problem.</p>