1.簡單認識CSS grid 網格系統
grid是css中好用的排版方式，透過設定欄（column)列(row)來達成像excel那樣的網格排版。
可分為包裹的容器（container)與被包裹的項目（item)，有各自的屬性可設置，以下分別介紹。
2.作為容器(container)有哪些屬性
在進入正題之前，先提一下grid屬性可用的單位，除了 px、%、em、auto….皆可用，auto 代表自動分配外，
比較特別的是fr這個單位，是以比例來作分配，不是固定的距離單位~ 且單位是可以混用的唷!
.container作為容器要畫上虛擬的排版線，而以下就是設定線會用到的屬性:
.container{
display: grid | inline-grid | subgrid; // 縱向排列 | 橫向排列 | 是item也是container
grid-template: 5px 40px auto 40px 5px / 40px 25% 2fr fr;
// 列(row)線的間距 / 欄(column)線的間距
-也可個別設定row、column
grid-template-rows: 5px 40px auto 40px 5px;
grid-template-columns: 40px 25% 2fr fr;
-線是可以命名的，名字加在數值前
grid-template-rows: [line1]40px [second-line]25% [3line]2fr [forth-line]fr;
-也可使用repeat(數量, 寬度[名字]) 作設定
grid-template-columns: repeat(3, 40px[colline]);
== grid-template-columns: [colline]40px [colline]40px [colline]40px;
}
3.作為項目(item)有哪些屬性
在.container畫完線了，接下來就是往格子裡頭放東西排版囉!
item可分為:
a. 用線(line)設定範圍
b.用區塊(area)做分配
a. 用線(line)設定範圍
數值皆可使用線的名字或線本身的index。
.item{
-item要佔據的範圍
grid-area: 1 / 3 / 3 / 4 ;
//row-start / column-start / row-end / column-end
-也可分別寫
grid-row: 1 / 3 ; // startline / endline
grid-column: 3 / 4 ; // startline / endline
-如果只寫2，代表2-3的單位
grid-row: 2;
== grid-row: 2 / 3;
-開始線和結束線也可分開寫
grid-row-start: 1 ;
grid-row-end: 3 ;
grid-column-start: 3 ;
grid-column-end: 4 ;
}
-若有多條同名線，在item使用可在名字後方加上數字做為index
grid-column-start: colline 2; //第二條叫做colline的線
-單位前皆可加上span表示擴展一條線的距離，
grid-column: span 2 / span 6 ; // 1<-2 / 6->7
== grid-column: 1 / 7;
b.用區塊(area)作分配
-設定item的區塊名稱
.item1{ grid-area: header; }
.item2{ grid-area: main; }
.item3{ grid-area: footer; }
.item4{ grid-area: sidebar; }
-再透過container排版
grid-template-areas:
"header header header header"
"main main main sidebar"
"main main main sidebar"
"footer footer footer footer"
-另外還有"none" ，"."兩個值，"none"是沒有指定區塊，"."是代表空格。
-item的分配不能是分段的，也不能是非四方形。
4.整理一下-間隔(gap)與對齊
布置好內容後，就該調整細部啦! grid一樣也有調整間隔的屬性，以及自身對齊與整體對齊的設定喔!
a.間隔(gap)
.container
grid-gap: 5px 10px; //row的間隔 column的間隔
-可分開寫
grid-row-gap: 5px;
grid-column-gap: 10px;b.對齊
-container本身與父元素空間的對齊或分配間隔
//垂直對齊
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: stretch; //預設值
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
//水平對齊
align-content: start;
align-content: end;
align-content: center;
align-content: stretch; //預設值
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
同時設定:
place-content: <align-content> / <justify-content>;
-container設定item整體的對齊
//垂直對齊
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch; //預設值
//水平對齊
align-items: start;
align-items: end;
align-items: center;
align-items: stretch; //預設值
同時設定:
place-items: <align-items> / <justify-items>;
-item對齊的使用方式同上只是是個別設定
justify-self: start、end、center、stretch;
align-self: start、end、center、stretch;
同時設定:
place-self: <align-self> / <justify-self>;5.範例&grid小遊戲
這邊推薦一個關於css grid的小遊戲，透過設定格線來澆花和除草，會帶你一步一步了解grid的用法。
點這: <GRID GARDEN>
另外是我自己寫的範例，可以操作grid的屬性以便理解喔!
See the Pen Untitled by Yukiyin (@yukiyin) on CodePen.
再來就是關於grid的支援度
可以來這邊看: Can I use grid?
YUKI碎碎念: 其實還有grid-auto-flow… 但我還沒搞得很清楚，所以就等搞懂後補上QQ
