25-[案例]百度风云榜（网格布局）

需求：使用网格布局实现图中色块布局方式
知识点：网格布局

<section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

        section{
            width: 370px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
            display: grid;
            /* grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: 
            "a1 a2 a2"
            "a3 a2 a2"
            "a4 a4 a5"
            "a6 a7 a7"; */
            
            /* 简写方式 */
            grid-template: 
            "a1 a2 a2" 1fr
            "a3 a2 a2" 1fr
            "a4 a4 a5" 1fr
            "a6 a7 a7" 1fr
            /1fr 1fr 1fr;

            grid-gap: 10px 10px;
            padding:10px
        }
        
        div:nth-child(1){
            grid-area: a1;
            background: pink;
        }
        div:nth-child(2){
            grid-area: a2;
            background: skyblue;
        }
        div:nth-child(3){
            grid-area: a3;
            background: lightcoral;
        }
        div:nth-child(4){
            grid-area: a4;
            background: lightseagreen;
        }
        div:nth-child(5){
            grid-area: a5;
            background: lightsteelblue;
        }
        div:nth-child(6){
            grid-area: a6;
            background: lightyellow;
        }
        div:nth-child(7){
            grid-area: a7;
            background: lightcoral;
        }