css之grid布局使用

场景：项目开发中遇到如下问题，从后端请求活动数据，数组长度未知，每一个活动以卡片格式展示，展示格式如下：

刚看到需求，我选择使用flex布局进行布局。创建如下demo

css:

      .wrapper{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 50px;
        }
        .box {
            margin: 10px;
        }
        .box div {
            background: pink;
             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循环从后端请求过来的数组，进行数据填充，无需考虑活动数据多少，进行数据展示啦！