grid布局

網格布局，顧名思義，方方正正的格子都用它布局??

常見屬性

網格容器屬性：grid，grid-template-columns，grid-auto-rows，gap...

網格子元素屬性：grid-row，grid-column，grid-area

布局方案

使用grid布局的三個常見場景，掌握以下三個即可掌握grid布局【重要????】

• 方正無缺、大小相同：

  直接設置grid-template-columns【見：九宮格方案】

• 方正無缺、大小不同：

  類似表格合并，設置grid-row、grid-column【見：網格線方案】

• 不正有缺、大小不同：

  排列無規律，且有缺角。設置grid-template-areas【見：網格區域方案】

常見用法

一、九宮格

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box4">7</div>
        <div class="box box5">8</div>
        <div class="box box6">9</div>
    </div>

    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        grid-auto-rows: 100px;
    }

二、三欄布局

1. 網格線方案

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(10, 50px);
        gap: 20px;
    }
    .box1{
        grid-column: 1 / -1;
    }
    .box2{
        /* 不設置總行數無法使用-1 */
        grid-row: 2 / -1; 
    }
    .box3{
        grid-column: 2 / -1;
        grid-row: 2 / -1;
    }

2. 網格區域方案

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 150px);
        gap: 20px;
        /* 三行兩列 */
        grid-template-areas: 
            'a a a'
            'b c c'
            'b c c'
        ;
    }
    .box1{
        grid-area: a;
    }
    .box2{
        grid-area: b;
    }
    .box3{
        grid-area: c;
    }

詳情參考：CSS布局網格