gird布局 简介

<div class="box">
            <div class="item">1</div>
              .......
</div>
.box{
        width: 500px;
        height: 450px;
        display: grid;
        /* 每行高度 auto */
        /* grid-template-rows:80px 90px; */
        /* 每列宽度 auto */
        /* grid-template-columns:100px 150px 200px; */
        /* 组合 */
        grid-template: auto 50px / 100px 200px;
        /* 结合子项目 grid-area*/
        grid-template-areas: "a c c c" ". b . .";

        /* 此时多出来的单元格高度都为30px */
        grid-auto-rows: 30px; 
        grid-auto-columns: 30px;
        /*自动排序项目的方式。*/
        /* grid-auto-flow:row dense; */

        /* 间隔 */
        /* grid-column-gap: 10px;
        grid-row-gap: 15px; */
        grid-gap:20px 10px;

        /* 垂直排列方向 */
        /* align-content: space-between; */
        /* 水平排列方向 */
        /* justify-content: end; */
        /* 组合 */
        place-content:center center;

        /* align-items:center; */
        /* justify-items:start; */
        /* 组合 */
        /* place-items:center center; */
    }
    .item:nth-child(1){
        grid-column-start:4;
        /* grid-row-start: 1;
        grid-row-end: 3; */
        /* 组合 */
        grid-row:1 / 3;
        
        grid-area: b;
        background: yellow;
        
    }
    .item:nth-child(2){
        /*组合 grid-row-start|end 和 grid-column-start|end */
        grid-area: 2/2/4/5;

        /* justify-self:end; */
        /* align-self:end; */
        /* 组合 */
        place-self: end end;
        
        background: rgb(131, 48, 52);
    }
    .item:nth-child(4){
        grid-row-start: 2;
        /* grid-column-start:2;
        grid-column-end:4; */
        /* 组合 */
        /* grid-column:2 / 4; */
        /* 等同于 横跨几列 */
        grid-column:2 / span 2;
        
        grid-area: c;
        background: red;
    }

更加深入资源可参考-阮一峰大佬