grid 布局的使用
css 網格布局，是一種二維布局系統。
瀏覽器支持情況:老舊瀏覽器不支持，
概念： 網格容器。元素應用dispalay:grid,它是所有網格項的父元素。
<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> </div>
網格項。網格容器的子元素。
<div class="container"> <div class="item "></div> <div class="item "></div> <div class="item"></div> </div>
網格線。組成網格線的分界線，他們可以是列網格線，也可以是行網格線
網格軌道。兩個相鄰的網格線之間為網格軌道，可以認為是網格的行列或者行。
網格單元。兩個相鄰的列網格線和兩個相鄰的網格線組成的網格單元，它是最小的網格單元。
網格區。網格區是由任意數量網格單元組成。
設置在網格容器上的屬性
注：當元素設置了網格布局，column、float、clear、vertical-align屬性無效
1. display: grid | inline-grid | subgrid;
屬性值： grid: 生成塊級網絡
inline-grid: 生成行內網格
subgrid: 如果容器本身是網格項，用來繼承父容器的行列大小。
2.grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size>
設置行和列的大小。
屬性值： track-size: 軌道大小，可以使用css長度，百分比或用分數。
line-name:網格線名字，可以選擇任意名字。
當設置行或者列大小為auto 時，網格會自動分配空間和網格名稱。
.container{ display:grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; }
可以給網格線定義名字.
.container{ display:grid; grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }
用fr單位可以將容器分為幾等份，例如下面分成三等份
.container{ display:grid; grid-template-columns: 1fr 1fr 1fr; }
3.grid-template-areas
通過獲取網格項中的grid-area屬性值（名稱），來定義網格模版。
重復網格區（grid-area）名稱將跨越網格單元格，‘.’代表空網格單元。
屬性值： grid-area-name: 網格項的grid-area屬性值（名字）‘.’ : 空網格單元 none: 不定義網格區域
.item-a{ grid-area: header; }
.item-b{ grid-area: main; }
.item-c{ grid-area: sidebar; }
.item-d{ grid-area: footer; }
.container{
display:grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
}
4. grid-column-gap：<line-size>; 和 grid-row-gap: <line-size> ;
網格單元間距
屬性值：line-size: 網格線間距,設置單位值
.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; }
5. grid-gap：<grid-column-gap> <grid-row-gap>;
是grid-column-gap 和 grid-row-gap簡寫。
.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-gap: 10px 15px; }
6. justify-items: start | end | center | stretch（默認） ;
垂直於列網格線對齊，適用於網格容器里的所有網格項。
屬性值：
start: 左對齊。
end: 右對齊。
center: 居中對齊。
stretch: 填滿（默認）。
.container{ display:grid; justify-items: start; }
7. align-items: start | end | center | stretch ;
垂直於行網格線對齊，適用於網格容器里的所有網格項。
屬性值：
start： 頂部對齊。
end： 底部對齊。
center： 居中對齊。
stretch：填滿（默認）。
8. justify-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格容
器，這時候你可以設置網格的對齊方式（垂直於列網格線對齊）。
屬性值： start: 左對齊。 end: 右對齊。 center: 居中對齊。
stretch: 填滿網格容器。 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。 space-evenly: 網格項間隔相等。
.container{ display:grid; justify-content: start; }
9. align-content: start | end | center | stretch | space-around |
space-between | space-evenly ;
如果用像px非彈性單位定義的話，總網格區域大小有可能小於網格
容器，這時候你可以設置網格的對齊方式（垂直於行網格線對齊）。
屬性值： start: 頂部對齊。 end: 底部對齊。 center: 居中對齊。
stretch: 填滿網格容器。 space-around: 網格項兩邊間距相等，網格項之間間隔是單側的2倍。
space-between: 兩邊對齊，網格項之間間隔相等。 space-evenly: 網格項間隔相等。
.container{ display:grid; align-content: start; }
10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;
自動生成隱式網格軌道（列和行），當你定位網格項超出網格容器
范圍時，將自動創建隱式網格軌道.
屬性值：track-size: 網格軌道大小,可以是固定值，百分比或者是
分數（fr單位）。
.container{ display:grid; grid-template-columns: 60px 60px; grid-template-rows: 90px 90px }
11. grid-auto-flow : row（默認） | column | dense ;
在沒有設置網格項的位置時，這個屬性控制網格項怎樣排列
屬性值：
row: 按照行依次從左到右排列。
column: 按照列依次從上倒下排列。
dense: 按先后順序排列。
設置在網格項上的屬性
1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的
開始位置，grid-column-end、grid-row-end定義網格項的結束位置。
屬性值： line: 指定帶編號或者名字的網格線。 span <number>: 跨越軌道的數量。
span <name>: 跨越軌道直到對應名字的網格線。 auto: 自動展示位置，默認跨度為1。
.item-a{ grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 }
2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
grid-row: <start-line> / <end-line> | <start-line> / span <value> ; 是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的簡寫。 .item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; }
3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;
定義網格項名字，以便創建模塊（容器屬性grid-template-areas來定義模塊）。
屬性值： name: 項目名子。 <row-start> / <column-start> / <row-end> / <column-end>:
可以是數字或網格線名字。
例子： 定義網格項名字：
.item-d{ grid-area: header }
通過網格線定位網格項：
.item-d{ grid-area: 1 / col4-start / last-line / 6 ; }
4. justify-self: justify-self: start | end | center | stretch;
定義單個網格項垂直於列網格線的對齊方式。
屬性值： start: 網格區域左對齊。 end: 網格區域右對齊。
center: 網格區域居中。 stretch: 網格區域填滿。
5. align-self: start | end | center | stretch;
定義單個網格項垂直於行網格線的對齊方式。
屬性值：
start: 網格區域頂部對齊。
end: 網格區域底部對齊。
center: 網格區域居中。
stretch: 網格區域填滿。