grid布局真的很強大，因為在自己的專案中使用最多的flex布局，導致grid使用的比較少。趁著空閒時重新把grid總結了一下。因為專案中很少使用自己只是簡單的總結使用，但是按照css那種經常會給你出乎意料的布局情況grid絕對存在布局玄學的情況，最近沒遇到等我之後遇到再更新到裡面，現在只是簡單的寫下。最最最基礎的東西了。。。
目錄
一：概述
grid和flex的異同
二：基本概念
三： 容器屬性
1：display：grid屬性，指定容器採用網格布局
2：grid-template-columns(列寬) grid-template-rows（行高）
（1）repeat()
（2）auto-fill
（3）fr關鍵字：
（4）minmax()函式
（4）auto關鍵字
（5）網格線的名稱[name]
3：grid-row-gap grid-column-gap grid-gap ：
4：grid-template-areas:
5：grid-auto-flow
6： justify-items
7：justify-content，align-content
8：grid-auto-columns,grid-auto-rows
四：專案屬性
1： grid-column-start,grid-column-end， grid-row-start,grid-row-end
2：grid-area :指定區域
3:justify-self,align-self
將網頁劃分為乙個個的網格，任意組合不同的網格，做出各種布局
相同：指定容器內部多個專案的位置
不同：flex指定專案針對軸線的位置是一維的。grid將容器分成行和列，產生單元格，然後指定專案所在的單元格是二維布局。
容器和專案，行列，單元格（cell），網格線（grid line）4x4的是5x5的網格線
屬性類似flex布局，分為兩類，一類定義在容器上面稱為容器屬性，另外乙個是專案屬性。
注：網格布局中專案的float,display:inline-block(table-cell),vertical-align和column-*等設定都將失效。
單位也可以使用百分比
總結：當確定單元格位置的時候，根據上面的值就能定位到單元格單位是多少
寫同樣重複的值使用這個函式，簡化重複的值，重複的次數和重複的值
grid-template-columns: repeat(3, 30px); 三個30px
grid-template-columns: repeat(2, 30px 100px 20px) ; 後面的三個一輪詢
關鍵字:容器裡單元格充分填充
grid-template-columns: repeat(auto-fill,100px);
grid-template-rows: 40px;
第一行的高度為40之後自動填充，不管除第一行之外的。
1fr 和2fr 後者尺寸是前者的兩倍
grid-template-columns:150px 1fr 2fr;
grid-template-rows: 50px 60px ;
寬度未知，固定150px剩下的按上面寫的比例進行展示
長度在這個範圍之內
grid-template-columns:100px 1fr 2fr minmax(100px,200px)
grid-template-rows: 50px 60px ;
最後一列的資料在100到200之間。可以和fr配合自適應使用，範圍的改變會導致fr單位的改變。
瀏覽器自己決定長度
頁面部分單位固定，auto部分自適應。存在多個auto，只有最開始的auto是自適應，其餘的是被自身內部內容撐開的大小。
設定行列間距
grid-gap: ;
定義區域，單個或者多個單元格組成
grid-template-areas: 'a b c' 'd e f' 'g h i'; 設定九個區域
grid-template-areas: 'a a a 'b b b' 'c c c '; a,b,c三個區域
當某個區域不用則使用『.』表示
區域的命名影響網格線，自動命名為區域名-start（end）
先行後列或者是先列後行。
grid-auto-flow: row dense; 充滿區域（依次進行填滿），見：grid-auto-flow檔案示例
下面6，7的屬性和flex布局相似
設定單元格內容水平位置，align-items：設定單元格垂直位置
start:起始邊緣
end:結束邊緣
center：居中
stretch： 拉伸，沾滿單元格整個寬度（預設值）
place-items: ;簡寫
顧名思義看文字意思就是設定內容區域在容器裡面的水平個居中位置，理所當然的存在合併屬性的寫法 place-content
start，end，center，stretch
space-around: 專案之間的間隔是邊緣專案和容器距離的兩倍
space-evenly： 專案之間的間隔相等，專案和容器間隔相等
space-between
place-content:
在原來3x3的網格外部存在的內容，這兩個屬性就是定義存在外部的內容的尺寸。 見：grid-auto-flow檔案示例
左右邊框所在的垂直網格線
上下邊框所在的水平網格線
注：使用這個屬性直接控制單元格的大小。
.content
.item1
另外可以指定網格線的名字進行位置的確定同時這四個屬性可以使用關鍵字span表示跨越多少單元格。
若產生專案重疊則使用z-index指定專案的重疊順序。
簡寫：grid-column:start / end
grid-row: start / end
和容器的grid-template 一起使用，決定專案的位置
也可用作1中的合併簡介，直接指定專案的位置在哪。
例子：grid-area:1/1/2/2
指定單元格內容的位置。取值和justify-content相同。這兩個的區別是乙個是定義容器內所有專案，乙個是單個專案。
簡寫： place-self
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
網格布局（grid布局）
他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...