CSS Layout — Grid
把前幾天學到CSS3的Grid system做整理，之後做實作練習。
content Introduction Grid Property Bottom
Introduction
Grid是繼Flexbox之後的排版方式，不過Flexbox只有一維排列，Grid 可以做到二維排列，Grid部分排版概念和Flexbox類似。
Grid system分做 Grid Container 、Grid Items和垂直軸(Column Axis)、水平軸(Row Axis)。
開始Grid排版前，需先宣告 display:grid 或 inline-grid
display: grid | inline-grid;
Gird Line
線用來定義元素的邊界，分隔元素，可以是垂直與水平線(vertical and horizontal lines) 下圖黑色為 horizontal lines，灰色為vertical lines。
Gutters
行或者列之間的間隔稱作 gutter
syntax: grid-column-gap || grid-row-gap
Grid Track(格線軌道)
兩條分隔線中間的區域，簡單想就是 Grid 中的 Columns 或 Rows。
syntax: grid-template-columns || grid-template-rows
Grid Cells
單一網格，且為網格系統的最小單位，由四條線組成的區域。
Grid Area
由多個 Cell 組成的區域
fr:
track-size 的其中一種單位，通常用於分配 row 或 column 的非彈性尺寸設定完後之剩餘空間。
<note>
在 grid container 底下的 children 是沒有順序差別的，我們都可以透過定義 grid items 的 properties 來設定他的擺放位置。當然，如果你沒有設定的話，就會照順序放置，如果該列放不下就會自動放到下一行。
Grid Property Content
TopGrid Container display grid-template-columns || grid-template-rows grid-template-areas grid-column-gap || grid-row-gap || grid-gap
justify-items
align-items
place-items
justify-content align-content
place-content grid-auto-columns || grid-auto-rows grid-auto-flowGrid Items grid-column-start || grid-column-end grid-row-start || grid-row-end grid-column || grid-row
grid-area justify-self align-self place-self Bottom
Grid Container
display:
將元素定義為網格容器
. container { display: grid | inline — grid ; }
grid：生成一個塊級網格，似block。
inline-grid ：生成一個內聯網格，似inline-block。
back Topgrid-template-columns || grid-template-rows
grid-template-columns || grid-template-rows
可以使用的值: track-size、 line-name
track-size: 可以是長度值，百分比或是fr。
line-name: 可以自由定義Grid Line的名稱
以下為實做
遇到定義相同row、column時可以用repeat(times, number)。
只有指定第三列250px
做法6: 第二列與一、三列寬度成 2: 1
做法7: 第一列寬度為父元素的50%
作法8
. container { grid — template — columns : 40px 50px auto 50px 40px ;grid — template — rows : 25 % 100px auto ; }
<note>
網格軌道(Grid Track) 值之間留出空格時，網格線會自動分配正數和負數名稱，也可以自己命名網格線。
命名網格線( naming grid line)，使用 [] 進行命名代替數值， 一條網格線(Grid Line)可以有多個名稱
back Topgrid-template-areas
指定的網格區域(Grid Area)名稱來定義網格模板命名網格區域 ; naming grid area)
使用 grid-template-areas: “name name…” 進行命名
給予每個網格名稱，在依照網格名稱填入該位置
注意: 每個網格都一定要命名
上方的Code依照名稱建一個3列寬4行高的網格。整個頂行一個header區域。中間一排由3個box區域，box區域下方是一個main區域，右邊一個sidebar區域橫跨box和main的區塊。最後一行全是footer區域組成。
重複網格區域的名稱導致內容跨越這些單元格
或是可以換個做法:
4個head的column將頭尾兩個改成" . "，header縮減成只有中間2格的長度，並將原本的box拆分成3個，可分別對單一box調整。
.（點號） ：代表一個空的網格單元
back Topgrid-column-gap || grid-row-gap || grid-gap
指定網格線(grid lines)的大小。或者說設置列、行之間間距的寬度。
back Topjustify-items
沿著水平軸線對齊網格項(grid items)，調整 item 水平位置，（相反的屬性是align-items）。用於容器內的所有網格項。stretch為默認值
justify-items: start || center || end || stretch
back Topalign-items
沿著垂直軸線對齊網格項(grid items)，調整 item 垂直位置，(相反的屬性是justify-items）。用於容器內的所有網格項。 stretch為默認值
align-items: start || center || end || stretch
back Topplace-items
設置align-items和justify-items的簡寫。
justify-content
設置網格容器內的網格的水平對齊方式，為水平移動，與Flexbox雷同。
justify-content: start || end || center || stretch || space-between || space-around || space-evenly
back Topalign-content
設置網格容器內的網格的垂直對齊方式，為垂直移動，與Flexbox雷同，。
justify-content: start|| center || end || stretch || space-between || space-around || space-evenly
back Topplace-content
align-content和justify-content的簡寫。
grid-auto-columns || grid-auto-rows
為隱式網格，應用於無法確認多少行或列的軌道(track)。
長度值可以是: 數值、 百分比、fr單位。
例如:
grid-auto-rows: 50px ; grid-auto-columns: 250px;
back Topgrid-auto-flow
一些沒有明確放置在網格上的網格項，會自動放置這些網格項，可設置填充方向為row或column。預設為 row，size可為數值、百分比、fr。
grid-auto-flow : row || column || row dense || column dense || row size|| column size
back TopGrid Items
定位網格項目: 引用特定網格線(grid lines)來確定網格項(grid item)在網格內的位置。
grid-column-start || grid-row-start || grid-column-end|| grid-row-end
-start 網格項開始的網格線； -end 網格項結束的網格
值可以是以下種類:
line: 可為一數字(被編號的網格線)，或自訂名字的網格線。
span: 後方可接定義的名稱、數值，表該網格項將跨越到它與提供名稱或數值的位置=>span + 要橫跨多少單位的網格。
auto: 表示自動放置、自動跨度，默認擴展一個網格軌道的寬度或者高度。
back Topgrid-column || grid-row
跨網格的效果: 起始線 / 終點線
<note>
假設今天想要佔據同一列或行的所有網格，但又不想計算有多少網格時，可以將終點線改為 -1
span使用範例: 以綠色為例
back Topgrid-area
為grid-row-start || grid-column-start || grid-row-end|| grid-column-end的簡寫，值可以為定義的名稱或是數值。
back Topjustify-self
調整單一個網格(Grid item)水平位置，沿著水平軸線對齊網格項（相反的屬性是align-self ）。默認值: stretch
justify-self : start | end | center | stretch ;
以center為例
back Topalign-self
調整單一個網格(Grid item)垂直位置，沿著垂直軸線對齊網格項（相反的屬性是justify-self）。默認值: stretch
align-self : start | end | center | stretch ;
以center為例
back Topplace-self
align-self 和 justify-self的簡寫。
back Top參考資料:
