-
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布局,無論是塊元素還是行內元素查看全部
舉報