grid網格布局是指將網格劃分為乙個個網格
注意事項：同flex布局一樣，在對其進行設定的時候在容器中也要設定display:grid
一.網格布局的基本屬性
1.設定行間距和列間距
行間距：grid-column-gap:
列間距：grid-row-gap:
倘若行間距和列間距相同則可以直接使用grid-gap:進行設定
2.設定列寬
使用grid-template-columns: 百分數
即可以為網格設定列寬
但是後面的百分數我們通常使用1fr,2fr等代替，這樣可以避免在設定巢狀時的麻煩
比如grid-template-columns: 1fr 1fr 1fr;而前面的也可以直接寫為grid-template-columns: repeat(3,1fr);
3.設定內容的高度
grid-auto-rows: minmax(100px,auto);的使用可以避免出現內容超過設定的行高時出現的溢位現象，其意義為基礎行高為100px，倘若內容行高大於100px則由內容撐開。
4.對齊方式
（一）以行軸線為基準 ：justify-items
預設值為stretch,表示完全拉伸
可選值為start（以行軸線開始為基準）
end（以行軸線末尾為基準）
center（以行軸線正中為基準）
（二）以列軸線為基準：align-items
預設值和可選值同上
（三）倘若要進行單獨設定可以使用align-self或者justify-self
5.進行跨越
例如從第一根網格線到第三條網格線進行縱向跨越（左右進行跨越）
grid-column: 1/3;
又比如從第一根網格線到第三根網格線進行橫向跨越（上下進行跨越）
grid-row: 1/3;
6.自定義網格模板
grid-template-areas:
』 … 』 』 … 』 』 … 』
單引號內具體內容看具體的設定
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...