宫格布局

1、设置宫格容器

2、设置display属性为grid

3、设置grid-template-rows多少行

4、设置grid-template-columns多少列

PS:先排满列再去填充行,单位有 1fr 100px auto-fill

        article{
            width: 300px;
            height: 400px;
            border: 5px solid #eee;
            display: grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        div{
            background-color: #f40;
            border: 2px solid #eee;
            box-sizing: border-box;
        }