Grid Layout

.wrapper { display: grid;　　　　　　　　/*wrapper的顯示按照grid的屬性 */ grid-template-columns: repeat(3, 1fr);　　　　/*grid-template-columns 爲屬性定義，定義網格 repeat爲重複，其中第一個參數表明重複次數 fr爲按照容器寬度計算後的基本單位*/ grid-gap: 10px;　　　　　　　　　　　　　　　　　　　/*設置網格間隔10像素*/ grid-auto-rows: minmax(100px, auto);　　　　　　　 } .one { grid-column: 1 / 3; /*定義one佔據範圍爲左到距右邊界三分之一處*/ grid-row: 1;　　　　　　　　　　　/*定義長度爲默認長度*/ } .two { grid-column: 2 / 4;　　　　　　/*定義two佔據左半邊*/ grid-row: 1 / 3;　　　　　　　　/*定義其長度爲默認兩倍*/ } .three { grid-column: 1;　　　　　　/*定義其長度爲下一個網格的一倍*/ grid-row: 2 / 5;　　　　　　/*定義長度爲下一網格的5/2倍*/ } .four { grid-column: 3;　　　　　　　　/*定義長度爲該網格的第幾部分*/ grid-row: 3;　　　　　　　　　　/*定義其起始位置爲第三列*/ } .five { grid-column: 2;　　　　　　　　　　/*定義起始位置爲第二列*/ grid-row: 4;　　　　　　　　　　　　/*定義起始位置爲第四根網格線*/ } .six { grid-column: 3;　　　　　　　　　　　　/*定義起始位置爲第三網格線*/ grid-row: 4;　　　　　　　　　　　　　　　/*定義起始位置爲第四網格線*/ }