css3網格布局一、父元素相關屬性以及屬性值
1、網路容器（給父元素設定）
將屬性display的屬性值設定為grid 或者 inline-grid，就建立了乙個網格容器，所有容器中的接子元素將自動成為網格專案元素。
display：grid | inline-grid
2、怎樣去顯示網格
（1）grid-template-rows 定義網格的行軌道
grid-template-rows：100px 100px 100px 表示三行，每一行高度為100px
（2）grid-template-coulumns 定義網格的列軌道
grid-template-coulumns:100px 100px 100px 表示為三列，每一列的width為100px
3、需要用的相關函式
（1）repeat（） 重複的網路軌道
grid-template-rows：repeat（3,100px）表示實現三行，每行高度為100px的網格
grid-template-coulumns:repeat（3,100px） 表示實現三列，每一列的寬度為100px的網格
（2）minmax（）
4、定義網格的間隙
（1）grid-column-gap
定義網格列與列之間的間隙大小
（2）grid-row-gap
定義網格的行與行之間的間隙
（3）grid-gap
定義行與行，列與列之間的間隙
grid-gap:1px；表示給行和列的間隙都新增1px的間隙
grid-gap:1px 2px; 第乙個表示行間隙，第二個表示列間隙
注意點：專案與邊界之間沒有間隙
二、給子元素（專案）設定
1、用網格線編號來定位專案位置
用來表示網格軌道的開始個結束
（1）grid-row-start
行的開始線條
（2）grid-row-end
行的結束線條
（3）grid-colum-start
列的開始線條
（4）grid-colum-end
列的結束線條
這是乙個3行2列的網格，即在行上有4條網格線，在列上有3條網格線。專案1利用網格線編號定位在第2行第2列的位置上。
（5）grid-row
是grid-row-start 和grid-row-end的縮寫
注意點：grid-row：value(開始) 或grid-row：value1(開始)/value2(結束)
（6）grid-column
是grid-column-start 和grid-column-end的縮寫
注意點：grid-column：value(開始) 或grid-column：value1(開始)/value2(結束)
（7）gris-area
是grid-row-start，grid-row-end，grid-colum-start和grid-column-end的縮寫形式
grid-area:2(grid-row-start)/2(grid-colum-start)/3(grid-row-end)/3(grid-column-end)
例如：.item1
小知識擴充套件：1、fr單位，用於表示軌道尺寸配額，表示按配額比例分配可用空間
例如：grid-template-columns：1fr 1fr 2fr;表示專案1佔1/4的寬度，專案2佔1/4的寬度，專案3佔2/4=1/2的寬度
css3網格布局
網格布局是flex的公升級版 父級屬性display grid 即可把這個div變成網格 父級屬性grid template columns 20 20 20 20 設定有多少列，每列有多寬。auto自動填 1fr 2fr 設定比例倍數 父級屬性grid template rows 200px 20...
關於css布局的記錄 二 網格布局
學習來自阮一峰老師的教程網格布局和網路上的一些資料的學習 1 定義 顧名思義，網格布局是將頁面按行 row 和列 column 劃分成乙個個網格來進行布局 使用方法 display grid inline grid來定義乙個容器為網格布局 在定義網格布局的容器裡面的display table cei...
css 網格布局 5個掌握CSS網格布局的快速資源
css 網格布局 在今天的快速提示中，我將向您展示五個掌握css網格布局的資源。讓我們潛入吧！自css誕生以來，網格布局可以說是web開發人員最重要的發展之一。這是乙個專門用於基於網格的使用者介面的布局系統，這意味著不再需要標準的 浮動 方法 說實話，hack 作為布局網頁的主要方法。第乙份工作草案...