-
grid-template-areas例子
查看全部 -
grid-template-areas語法
屬性值
1：<grid-area-name>:使用grid-area屬性設置的網格
2：".":點號代表一個空單元格
3：none：沒有定義網格區域
查看全部 -
line-name(網格線的名字)
[]包裹，可以有多個名字，用空格隔開即可
--例子
查看全部 -
grid-template-columns和grid-template-rows
語法
grid-template-columns:<track-size>..| <line-name> <track-size> ...;
grid-template-rows:<track-size> | <inline-name> <track-size> ...;
參數說明
1：track-size(軌道大小)：可以使用css長度（px,em，rem等），百分比或用分數（用fr單位）
2：line-name（網格線的名字：可以選擇任何名字
查看全部 -
display: grid | inline-grid | subgrid;
注意
--當元素設置成網格布局，column,float,clear,vertical-align屬性無效。subgrid目前所有瀏覽器都不兼容
查看全部 -
單位
fr-->剩余空間分配數，類似于flex布局的屬性flex-grow
gr-->網格數（目前w3c并未采納這個單位）
查看全部 -
網格區域
--四個網格線包圍的中總空間
查看全部 -
網格單元--grid cell
--兩個相鄰的列網格線和兩個相鄰的行網格線組成的是網格單元
注意
要區分網格單元和網格項，網格項是實實在在存在的，而網格單元則如同圖中空白的區域，是找不到的
查看全部 -
網格軌道
--兩個相鄰的網格線之間為網格軌道
查看全部 -
Grid和Flexbox的區別
查看全部 -
Grid布局的優勢
1：固定或彈性的軌道尺寸
2：定位項目
3：創建額外的軌道來保存內容
4：控制重疊內容(z-index)
查看全部 -
CSS網格布局簡介--》二維方向的自適應
注意
而flex布局則是一維，即只能在一個方向上進行自適應
查看全部 -
網格布局從給所有網格布局元素的根元素聲明"display:grid"開始查看全部
-
Grid Layout(網格布局)的認識 1.它在最近幾年(2017年前后)開始在國內興起，所以說是比較新的前端技術。 2.它屬于二維布局，不同于Flex(彈性盒子)的一維布局 3.和Flex(彈性盒子)布局相比有更大的便利性，與Flex Layout在布局方面相輔相成，并不是說前者取代了后者。 4.要學好網格布局，首先要打好HTML和CSS基礎，尤其要深刻認識盒子模型查看全部
-
網格項遵循grid布局，無論是塊元素還是行內元素查看全部
舉報