# Web企業運算_Week6_許家維
## 學習清單
* Grid + Flex 詳細複習
* 推薦影片 : https://www.youtube.com/watch?v=fYcz3FUqv7M&t=5184s
* 規劃期中個人作品網站 Prototype
* 觀看技術文章
* 本文網址 : https://hackmd.io/1CunaxXLT5GZJEUhr_D1eg?both
## Code
* 大富翁版型練習

HTML

    <div class="wrapper">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
        <div class="child">12</div>
        <div class="child">13</div>
        <div class="child">14</div>
        <div class="child">15</div>
        <div class="child">16</div>
    </div>

CSS

    .wrapper {
        display: grid;
        <!--    將整個大版面擺到中間     -->
        justify-content: center;
        align-content: center;
        grid-gap: 1rem;
        <!--    每個占螢幕寬的7% 重複五次    -->
        grid-template-columns: repeat(5, 7vw);
        grid-template-rows: repeat(5, 7vw);
        margin-top: 50px;
    }
    
    .child {
        border : solid 1px black;
        text-align: center;
        <!--    內部設定為flex來移動內部文字      -->
        display: flex;
        align-items: center;
        justify-content: center;
        <!--    給一張背景假圖     -->
        background-image: url(https://picsum.photos/200/300/?blur);
        background-position: center center;
        background-size: cover;
        color: white;
        <!--    1em = 16px    -->
        font-size: 2em;
    }
    <!--  設定每一格的位置    -->
    .child:nth-child(1) {
        grid-row: 1;
        grid-column: 1;
    }
    .child:nth-child(6) {
        grid-row: 2;
        grid-column: 5;
    }
    .child:nth-child(7) {
        grid-row: 3;
        grid-column: 5;
    }
    .child:nth-child(8) {
        grid-row: 4;
        grid-column: 5;
    }
    .child:nth-child(9) {
        grid-row: 5;
        grid-column: 5;
    }
    .child:nth-child(10) {
        grid-row: 5;
        grid-column: 4;
    }
    .child:nth-child(11) {
        grid-row: 5;
        grid-column: 3;
    }
    .child:nth-child(12) {
        grid-row: 5;
        grid-column: 2;
    }
    .child:nth-child(13) {
        grid-row: 5;
        grid-column: 1;
    }
    .child:nth-child(14) {
        grid-row: 4;
        grid-column: 1;
    }
    .child:nth-child(15) {
        grid-row: 3;
        grid-column: 1;
    }
    .child:nth-child(16) {
        grid-row: 2;
        grid-column: 1;
    }

成果圖

## 成果
### Grid 重點簡介
* Grid 網格佈局 : 可以任意組合不同的網格，和Flex不同的是，Flex只能指定Items對於軸線的位置，而Grid則**將容器分為欄和列，並指定Items所在的網格位置**，屬於二維的佈局方式
* 使用方式 : 直接將父元素設置為 ```display : grid;```即可。
* 基本用法
* ```grid-template-rows / grid-template-columns``` : 設置欄跟列的版面方式
* ```grid-area``` : 自定義區域名稱
* ```grid-template-areas``` : 設定區域模板

        grid-template-areas :
            "A A B B"
            "A A B B"
            "A A . B"
            "C C C C" ;

HTML

    <div class="container">
        <div class="AA">A</div>
        <div class="BB">B</div>
        <div class="CC">C</div>
        <div class="DD">D</div>
    </div>

CSS

    .container {
    /* 給內外距使顯示清楚 */
        margin: 20px;
        padding: 20px;
        width: 400px;
        height: 400px;
        outline : solid 2px black;
        display : grid;
        /* 設定欄與列，下列兩行皆為切成1/4 */
        grid-template-rows: repeat(4,100px);
        grid-template-columns: repeat(4,1fr);
        /* 設定每個區域的模板，空值用.代替即可 */
        grid-template-areas: 
        "A A A ."
        "B B B B"
        "C C . ."
        "C C D D";
        font-size: 40px;
    }
    .AA {
        outline : solid 2px #00d;
        /* 設定區域名稱 */
        grid-area: A;
    }
    .BB {
        outline : solid 2px #0d0;
        grid-area: B;
    }
    .CC {
        outline : solid 2px #d00;
        grid-area: C;
    }

    .DD {
        outline : solid 2px #0dd;
        grid-area: D;
    }

結果圖
* **位置需連續才可使用 ! ! !**
* **通常Grid適用於大版面的切版，較小的區塊可搭配Flex使用**
* ```grid-gap``` : 設置欄與列間的間隙
* 通常最後一個row會設定auto，以防加了gap後突出如圖
* 
* 將上方程式碼改為```grid-template-rows : 100px 100px 100px auto;``` 即可解決
* ```grid-row / column : 開始線 / 結束線; ``` : 若數字為-(i)，代表從另一邊數來第i條線(這個可以好好運用 !!)
* ```grid-auto-columns / rows : 1fr;``` : 父元素設定自動欄與列寬
* 若設定格位超過既定格位 -> 會產生自動的格線
* ```justify-content``` : 整體水平軸對齊
* ```justify-items``` : 各欄水平軸對齊 (Flex沒有)
* ```align-content``` : 整體垂直軸對齊
* ```align-items``` : 各欄垂直軸對齊
* ```minmax(最小尺寸,最大尺寸)``` : 可利用此製作RWD
* ```grid-row : i / span j``` : 從 i 橫跨 j 格
* **注意 ! grid-row 方向性永遠由上往下 !**
* grid-area : 橫(row)起點 / 直(column)起點 / 橫終點 / 直終點
* ```auto-fill``` : 自動填滿(若有多出格位，會產出col-track)
* ```auto-fit``` : 自動填滿(若有多出格位，col-track會設為0px折疊起來)<br>
## 心得
1.學到的知識
* 測試可使用outline代替border，因為border會有推擠的問題
* 需先設定postion : realative才能設定z-index ! !

2.心得 : 這周課堂上學習了方便的layout工具 - Grid 來進行網頁的排版，由於較為複雜，我花了許多時間了解整個概念，了解後發現他真的是一個容易切版的工具。網路上提到，Grid適用於大版面的撰寫，較小的版面則使用flex搭配去撰寫。趁著期中作業要利用Grid + Flex 製作一個個人作品集網站，我會試著給自己一些挑戰，挑戰一些比較困難的版型，並期望能搭配一些動畫，讓整個作品集更加生動。