下面的代码显示了当我调整窗口大小时的预期行为
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>
重要的是图像的长宽比 (2:1)
被保留。我本来期望：
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，也没有背景图像黑客。
Update:我最初排除背景图像破解有两个原因。
我认为（由于一些误解）背景图像
url 必须在 CSS 文件中，但情况并非如此：我可以使用
内联样式并将其放在 HTML 中。
感觉很黑客。在看到事情变得多么复杂和混乱之后
将嵌套的 Flex 容器嵌套在网格容器中，只是为了使其在 Safari 上工作，我只是简单地采用了背景图像 hack显著地更干净，适用于所有经过测试的浏览器（Chrome、Firefox、Safari）。
最后，公认的答案并没有帮助解决我的问题。
您可以使用grid-template-rows: 1fr 1fr 1fr更重要的是你必须重置min-width and min-height的价值观网格项目默认为auto（与内容一样）。
为了给网格项提供更合理的默认最小尺寸，这
规范定义了 min-width/min-height 的自动值
将指定轴上的自动最小尺寸应用于网格项
其溢出是可见的，并且跨越至少一个轨道，其最小
轨道大小调整功能是自动的。 （效果类似于
自动对弹性项目施加最小尺寸。）
Source: W3C https://www.w3.org/TR/css-grid-1/#min-size-auto
这类似于自动弹性项目统治与弹性盒。请参阅下面的演示，我将它们重置为zero:
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: 1fr 1fr 1fr;
height: 60vh;
border: 3px solid yellow;
padding: 3px;
/*grid-gap: 20px;*/ /* <-- would also mess things up */
}
.tile {
min-width: 0;
min-height: 0;
}
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
