css之grid布局使用
场景:项目开发中遇到如下问题,从后端请求活动数据,数组长度未知,每一个活动以卡片格式展示,展示格式如下:
刚看到需求,我选择使用flex布局进行布局。创建如下demo
css:
.wrapper{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 50px; } .box { margin: 10px; } .box div { background: pink; width: 500px; height: 200px; text-align: center; line-height: 200px; font-size: 20px; font-weight: bold; }
html:
<div class="wrapper"> <div class="box"> <div>box1</div> </div> <div class="box"> <div>box2</div> </div> <div class="box"> <div>box3</div> </div> <div class="box"> <div>box4</div> </div> <!-- <div class="box"> <div>box5</div> </div> --> </div>
存在问题:当最后一行不是一个“卡片”时,布局会出现问题,如下图
尝试了几种解决方法,无果,最终查到可使用CSS3的grid布局。
参考阮老师的资料:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
修改CSS
.wrapper { display: grid; /* 使用grid */ /* grid-template-columns属性定义每一列的列宽; fr为方便表示比例关系的一种关键字*/ grid-template-columns: 1fr 1fr 1fr; padding: 50px; }
展示如图:
这样就可以结合angularJS的ng-repeat循环从后端请求过来的数组,进行数据填充,无需考虑活动数据多少,进行数据展示啦!