下面的代码显示了在Chrome 60和Firefox 55中调整窗口大小时的预期行为（但在iOS Safari 10.3中没有；这很可能是另一个问题，为什么它在Safari中行为不当）。

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;*/ /* <-- 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;

}


 <!-- The image is 200 x 100 px: a green and a blue square next to each other. -->

 <div class="container">

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

 </div>

被保留。我本来期望：

grid-template-rows: 1fr 1fr 1fr;

or:

grid-template-rows: auto auto auto;

使图像适合网格的行，但它们都不行。带有：

grid-template-rows: repeat(3, calc((60vh - 12px)/3));

我得到期望的行为。如何避免自己计算数学？换句话说，我应该怎么做才能使grid-template-rows: 1fr 1fr 1fr;（或类似的东西）起作用？

在实际页面上用CSS计算容器元素的高度已经很困难。目标是通过CSS网格布局解决该问题；没有JavaScript，也没有背景图片骇客。

更新：我最初排除了背景图片骇客的原因有两个。

1. 我认为（由于一些误解）背景图像url必须在CSS文件中，但事实并非如此：我可以使用内联样式并将其包含在HTML中。

2. 感觉有点黑。在看到嵌套的弹性容器嵌套在网格容器中以使其能够在Safari上运行之后，它变得多么复杂和混乱之后，我简单地诉诸于背景图像黑客，因为它明显更干净并且可以在所有经过测试的浏览器（Chrome，Firefox，苹果浏览器）。

最后，不是解决问题的公认答案。