我有一个3行的CSS网格。可能少于3个项目要填充,我想从底部开始填充。
我已经创建了一个jsFiddle供您使用,但目前无法完成我想要的操作。
HTML
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
CSS
div {
display: grid;
grid-template-columns: 1;
grid-template-rows: repeat(3, 1fr);
/* MISSING RULE */
}
实际输出:
Last item
Second last item
Top item
所需的输出:
Top item
Second last item
Last item
如果可能,我想对包含网格的<div>
应用一个规则,而不是对网格中的项目应用单独的规则。
如果要使用grid
,将是这样。我修改了您的html
。您必须为网格子项写css
属性,从何处开始和从何处结束。 grid-row-start:
和grid-row-end:
。
.grid-item{
border: 2px solid red;
border-raidus: 5px;
height: 200px;
padding: 10px;
width: 300px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.grid-item p{
margin: 0;
}
.grid-item .first-item{
grid-row-start: 1;
}
.grid-item .last-item{
grid-row-start: 3;
}
<div class="grid-item">
<p class="last-item">Last item</p>
<p class="second-item">Second last item</p>
<p class="first-item">Top item</p>
</div>
如果要使用flexbox
,将使用two行代码。
<div>
<p>Last item</p>
<p>Second last item</p>
<p>Top item</p>
</div>
[CSS为此
div{
display: flex;
flex-direction: column-reverse;
}
[flex-direction CSS属性设置将弹性项目放置在定义主轴和方向(法向或反向)的弹性容器中的方式。