grid-area的排列问题
<style>
.main2{
width: 300px;
height: 300px;
background-color: orange;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: 'g1 g2 g3'
}
.main2 .row{
background-color: skyblue;
border: 1px solid #ccc;
}
.main2 .row:nth-child(1){
/*这样排列，页面上就会显示 2， 3， 1 的顺序。 如果我要显示3，2，1那应该怎么修改grid-area*/
grid-area: g3;
}
</style>
<body>
<div class="main2">
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
</div>
</body>
上面的代码，排列顺序上2，3，1，如果我要显示3，2，1那应该怎么修改grid-area？
359
收起
正在回答
1回答
.main2 .row:nth-child(1){ grid-area: g3; }
.main2 .row:nth-child(2){ grid-area: g2; }
.main2 .row:nth-child(3){ grid-area: g1; }
0
有任何疑惑可以回复我~
相似问题
为什么不用grid布局？
3217
0
4
关于runtime在方法列表中查找方法的问题
827
1
2
表格类布局可以改用grid吗?
548
0
3
删除grid-template-areas页面异常，样式错乱
279
1
1
微信小程序支持cas3的grid 布局吗？
351
0
2
登录后可查看更多问答，登录/注册
