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