繼續介紹grid
grid有個東西與flex-grow一樣透過計算來分配大小，fr

grid-template-columns:1fr 150px 200px;

fr會填充剩下的空間，像是這邊fr的寬度是先-150px-200px-gap後分到的寬度

fr會因為視窗大小縮放

假設剩餘空間是100%，每個fr都會去分配這個100%，下方總共是1+2+3=7個fr，每個fr的比例就是100/7*倍數，

 grid-template-columns:1fr 2fr 3fr;

column-gap: 20px;
row-gap: 50px;

可以用column-gap與row-gap來分別設定行間距與列間距

grid-template-area:在使用前需要先給每個物件設定grid-area，grid-area可以隨便給，只要能記得它代表的是誰就好

.div1{background-color: aqua;grid-area: div1;}
.div2{background-color: yellow;grid-area: div2;}
.div3{background-color: coral;grid-area: div3;}
.div4{background-color: lightgreen;grid-area: div4;}
.div5{background-color: lightsalmon;grid-area: div5;}
.div6{background-color: lightblue;grid-area: div6;}
.div7{background-color: pink;grid-area: div7;}
.div8{background-color: lightgray;grid-area: div8;}
.div9{background-color: lightgoldenrodyellow;grid-area: div9;}

    <div class="grid-box">
        <div class="div1">我是1</div>
        <div class="div2">我是2</div>
        <div class="div3">我是3</div>
        <div class="div4">我是4</div>
        <div class="div5">我是5</div>
        <div class="div6">我是6</div>
        <div class="div7">我是7</div>
        <div class="div8">我是8</div>
        <div class="div9">我是9</div>
    </div>

接下來就可以用grid-template-area來自由分配網格，下方表示給第一列分配三格的空間給div1給div2一格的空間

grid-template-areas: "div1 div1 div1 div2";

接下來表示給第二列添加div3,4,5,6各一格的空間

grid-template-areas: 
"div1 div1 div1 div2"
"div3 div4 div5 div6"
;

接下來第三列一樣給div3,4,6各一格的空間，但是中間穿插個div7，在同一行的相同div會因此合併

grid-template-areas: 
"div1 div1 div1 div2"
"div3 div4 div5 div6"
"div3 div4 div7 div6"
;

最後一列，給div3一格，div8兩格,div9一格

grid-template-areas: 
"div1 div1 div1 div2"
"div3 div4 div5 div6"
"div3 div4 div7 div6"
"div3 div8 div8 div9"
;

完整grid

當有位置不想分配給網格時可以用.來替代

grid-template-areas: 
"div1 div1 div1 div2"
"div3 . div5 div6"
"div3 div4 . div6"
"div3 div8 div8 div9"
;

grid-template-areas的分配是挺自由的，但還是有要注意的點，前面可以看到重複出現的網格會合併，但是當網格合併不了時就會無法顯示，所以重複的網格必須貼在一起，下面單把第一列的div1中間再穿插個div2來示範

"div1 div2 div1 div2"

可以看到全部沒了