grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
inline-grid ：生成乙個內聯網格
subgrid ：如果你的網格容器本身是另乙個網格的網格項（即巢狀網格），你可以使用這個屬性來表示
你希望它的行/列的大小繼承自它的父級網格容器，而不是自己指定的。
css**:.
container
css**:.
container
css**:.
container
css**:.
container
css**:.
container
css**:.
container
css**:.
container
css**:.
container
css**:.
container
屬性指定的 網格區域(grid area) 名稱來定義網格模板。重複網格區域的名稱導致內容跨越這些單元格。乙個點號（.）代表乙個空的網格單元。這個語法本身可視作網格的視覺化結構。
指定的網格區域名稱
.（點號） ：代表乙個空的網格單元
none：不定義網格區域
css**:.
container
css**:.
item-a
.item-b
.item-c
.item-d
.container
，grid-template-columns，grid-template-areas縮寫 (shorthand) 屬性。
subgrid：將grid-template-rows，grid-template-columns的值設為subgrid，grid-template-areas設為初始值
/ ：將grid-template-columns和grid-template-rows設定為相應地特定的值，並且設定grid-template-areas為none
**:.
container
css**:.
container
css**:.
container
不會重置 隱式 網格屬性（grid-auto-columns，grid-auto-rows， 和grid-auto-flow），
這可能是你想在大多數情況下做的，建議使用grid屬性而不是grid-template。
**:.
container
css**:.
container
和grid-row-gap的縮寫語法
**:.
container
css**:.
container
沒有定義，那麼就會被設定為等同於grid-column-gap的值。例如下面的**是等價的：
**:.
container
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 ...
Css Grid 網格布局
同 指定容器內部的多個專案的位置 異 指定三行三列 寬高為10px grid template columns 10px 10px 10px grid template rows 10px 10px 10px簡寫 grid template columns repeat 3,10px auto fi...