grid佈局筆記
阿新 • • 發佈：2018-11-09
1、應用 display: grid 的元素。這是所有網格項（Grid Items）的直接父級元素。即容器
2、網格容器（Grid Container）的子元素（直接子元素）。
3、注意：在 網格容器(Grid Container) 上使用column，float，clear， vertical-align 不會產生任何效果。
4、grid-template-columns / grid-template-rows
– <track-size>： 可以是長度值，百分比，或者等份網格容器中可用空間（使用 fr 單位） – <line-name>：你可以選擇的任意名稱 grid-template-columns: repeat(3, 10px) 5% eg: .container { grid-template-columns: <track-size> ... | <line-name> <track-size> ...; grid-template-rows: <track-size> ... | <line-name> <track-size> ...; }5、grid-template-areas
6、grid-template
用於定義 grid-template-rows ，grid-template-columns ，grid-template-areas 縮寫 (shorthand) 屬性。 值： none：將所有三個屬性設定為其初始值 subgrid：將grid-template-rows，grid-template-columns 的值設為 subgrid，grid-template-areas設為初始值 grid-template-rows / grid-template-columns：將 grid-template-columns 和 grid-template-rows 設定為相應地特定的值，並且設定grid-template-areas為none7、justify-items 沿著 行軸線(row axis) 對齊 網格項(grid items) 內的內容，該值適用於容器內的所有網格項。
8、align-items 沿著 列軸線(column axis) 對齊 網格項(grid items) 內的內容。
start：將內容對齊到網格區域(grid area)的頂部 end：將內容對齊到網格區域的底部 center：將內容對齊到網格區域的中間（垂直居中） stretch：填滿網格區域高度（預設值）9、網格合計大小可能小於其 網格容器(grid container) 大小時，使用justify-content設定網格容器內的網格的對齊方式, 此屬性沿著 行軸線(row axis) 對齊網格
start：將網格對齊到 網格容器(grid container) 的左邊 end：將網格對齊到 網格容器 的右邊 center：將網格對齊到 網格容器 的中間（水平居中） stretch：調整 網格項(grid items) 的寬度，允許該網格填充滿整個 網格容器 的寬度 space-around：在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間 space-between：在每個網格項之間放置一個均勻的空間，左右兩端沒有空間 space-evenly：在每個柵格專案之間放置一個均勻的空間，左右兩端放置一個均勻的空間
10、網格合計大小可能小於其 網格容器(grid container) 大小時，使用align-content設定網格容器內的網格的對齊方式, 此屬性沿著 列軸線(column axis) 對齊網格
start：將網格對齊到 網格容器(grid container) 的頂部 end：將網格對齊到 網格容器 的底部 center：將網格對齊到 網格容器 的中間（垂直居中） stretch：調整 網格項(grid items) 的高度，允許該網格填充滿整個 網格容器 的高度 space-around：在每個網格項之間放置一個均勻的空間，上下兩端放置一半的空間 space-between：在每個網格項之間放置一個均勻的空間，上下兩端沒有空間 space-evenly：在每個柵格專案之間放置一個均勻的空間，上下兩端放置一個均勻的空間11、grid-auto-columns / grid-auto-rows
指定任何自動生成的網格軌道(grid tracks)（又名隱式網格軌道）的大小。 在你明確定位的行或列（通過 grid-template-rows / grid-template-columns），超出定義的網格範圍時，隱式網格軌道被建立了。 eg: .item-a { grid-column: 1 / 2; grid-row: 2 / 3; } .item-b { grid-column: 5 / 6; grid-row: 2 / 3; }12、grid-auto-flow
如果你有一些沒有明確放置在網格上的網格項(grid items)，自動放置演算法 會自動放置這些網格項。該屬性控制自動佈局演算法如何工作。 值： row：告訴自動佈局演算法依次填充每行，根據需要新增新行 column：告訴自動佈局演算法依次填入每列，根據需要新增新列 dense：告訴自動佈局演算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺 eg: <section class="container"> <div class="item-a">item-a</div> <div class="item-b">item-b</div> <div class="item-c">item-c</div> <div class="item-d">item-d</div> <div class="item-e">item-e</div> </section> .container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; } .item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; } 設定為row時中間未設定起始線的bcd會按行自動排列 設定為column時中間為設定起始線的bcd會按照列自動排列（先排滿第一列再排下一列）13、grid綜合寫法
.container { grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]]; }子元素屬性
14、通過指定 網格線(grid lines) 來確定網格內 網格項(grid item) 的位置。 grid-column-start / grid-row-start 是網格專案開始的網格線，grid-column-end / grid-row-end 是網格項結束的網格線。 line ：可以是一個數字引用一個編號的網格線，或者一個名字來引用一個命名的網格線 span number ：該網格項將跨越所提供的網格軌道數量 span name ：該網格項將跨越到它與提供的名稱位置 auto ：表示自動放置，自動跨度，預設會擴充套件一個網格軌道的寬度或者高度 eg: .item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 } 如果沒有宣告指定 grid-column-end / grid-row-end，預設情況下，該網格項將佔據1個軌道（即一行或者一列）15、grid-column / grid-row
分別為 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的縮寫形式。16、grid-area
為網格項提供一個名稱，以便可以 被使用網格容器 grid-template-areas 屬性建立的模板進行引用。 另外，這個屬性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的縮寫。 eg:.item-d { grid-area: header } eg:.item-d { grid-area: 1 / col4-start / last-line / 6 }17、justify-self 沿著 行軸線(row axis) 對齊 網格項 內的內容，此值適用於單個網格項內的內容。
start：將內容對齊到網格區域的左側 end：將內容對齊到網格區域的右側 center：將內容對齊到網格區域的中間（水平居中）stretch：填充整個網格區域的寬度（這是預設值）