我有一个 3 行的 CSS 网格。可能要填的项目还不到3个，我想从底部开始填。
我创建了一个jsFiddle https://jsfiddle.net/Lexogram/vd7g4x5e/8/供你玩，但目前它无法达到我想要的效果。
html, body, div {
height: 100%;
}
div {
display: grid;
grid-template-columns: 1;
grid-template-rows: repeat(3, 1fr);
/* MISSING RULE */
}
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
实际输出：
Last item
Second last item
Top item
期望的输出：
Top item
Second last item
Last item
我想应用一条规则<div>包含网格，而不是对网格中的项目单独的规则（如果可能的话）。
没有column-reverse https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction函数于CSS Grid https://www.w3.org/TR/css3-grid-layout/，就像 Flexbox 中一样。
因此，使用容器中的单个规则不可能使网格区域从底部开始填充容器。
下面是它在 Flexbox 中的工作方式：
div {
display: flex;
flex-direction: column-reverse;
height: 100vh;
}
p {
flex: 1;
}
/* demo styles */
p {
margin: 0;
background-color: lightgreen;
}
p + p {
margin-bottom: 10px;
}
body {
margin: 0;
}
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
