3. gap
4. items
5. content
三、專案屬性
display：grid；指定乙個容器採用網格布局
div
設為網格布局以後，容器子元素（專案）的float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效。
grid-template-rows屬性：定義每一行的行高
grid-template-columns屬性：定義每一列的列寬語法：
.container
grid-template-areas屬性：定義某一區域名稱語法：
.container
grid-template屬性：grid-template-rows，grid-template-columns和grid-template-areas屬性的縮寫。語法：
.container
未完待續。。。。作用：設定列與列的間隔（列間距）。語法：
.container
作用：設定行與行的間隔（行間距）語法：
.container
作用：grid-column-gap和grid-row-gap屬性的縮寫。語法：
.container
未完待續。。。。justify-items屬性：設定單元格內容的水平位置（左中右）
align-items屬性：設定單元格內容的垂直位置（上中下）語法：
.container
作用：是align-items屬性和justify-items屬性的合併簡寫形式
.container
未完待續。。。。justify-content屬性：指定了網格元素的水平分布方式
align-content屬性：指定了網格元素的垂直分布方式語法：
.container
作用：是align-items屬性和justify-items屬性的合併簡寫形式
.container
未完待續。。。。作用：指定其隸屬於那個區語法：
.container
.container div
justify-self屬性：設定單元格內容的水平位置（左中右）
align-self屬性：設定單元格內容的垂直位置（上中下）語法：
.container
作用：是align-self屬性和justify-self屬性的合併簡寫形式
.container
未完待續。。。。CSS Grid 網格 布局
grid template columns grid template rows grid template areas grid template grid column gap grid row gap grid gap justify items align items justify con...
CSS Grid 網格布局
css grid是乙個強大的 web 二維布局工具，能夠以行和列來進行布局 通過設定display的屬性為grid或inline grid來建立網格容器 display grid 預設行排列，寬度為容器的寬度 container複製 圖1 1.png display inline grid cont...
CSS Grid 網格布局
概念 grid布局又稱css網格布局，又名 網格 是乙個二維的基於網格的布局系統，其目的只在於完全改變我們設計基於網格的使用者介面的方式 和grid template columns一起，單位統一 a.fr單位 b.repeat 方法 注 網格中提供了乙個新的單位 fr 比例單位 寫法 例子 12 ...