-
grid
?在單個(gè)屬性中設(shè)置所有以下屬性的j簡(jiǎn)寫:grid-template-rows,
grid-template-columns,grid-template-areas,grid-auto-rows,
grid-auto-columns 和grid-auto-flow.
同時(shí)將set grid-column-gap 和grid-row-gap設(shè)置未他們的初始值，幾時(shí)他們不能被彼此屬性顯示設(shè)置。
查看全部 -
grid-auto?
屬性值
row：告訴自動(dòng)布局算法依次填充每行，根據(jù)需要添加新行
column:告訴自動(dòng)布局算法依次填充每列，根據(jù)需要添加新列
dense:告訴自動(dòng)布局算法，如果后面出現(xiàn)較小的grid item 則嘗試在網(wǎng)格中填充空洞
查看全部 -
grid-auot-flow
控制自動(dòng)布局算法的工作方式。
.container{
grid-auto-flow:row | column | row dense | column dense
}
查看全部 -
屬性值<track-size>:可以是一個(gè)長(zhǎng)度值，一個(gè)百分比值，或者一個(gè)自由空間的一部分(使用fr單位)
查看全部 -
.container{
grid-auto-columns:<track-size>...;
grid-auto-rows:<track-size>...;
}
查看全部 -
grid-auto -columns/grid-auto-rows
指定自動(dòng)生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小
查看全部 -
屬性知?
space-around：在grid item之間設(shè)置均等寬度的空白間隙，
其外邊緣消息大小未中間空白間隙寬度的一半
sapce-between:在grid item 之間設(shè)置均等寬度空白間隙，其外邊緣無(wú)間隙?
space-evenly:在每個(gè)grid item 之間設(shè)置均等寬度的空白間隙，包括外邊緣
查看全部 -
屬性值
start :網(wǎng)格與網(wǎng)格容器的左邊對(duì)齊
end:網(wǎng)格與網(wǎng)格容器的右邊對(duì)齊?
center:網(wǎng)格與網(wǎng)格容器的中間對(duì)齊
strech :調(diào)整grid item 的大小，r讓寬度填充整個(gè)網(wǎng)格容器
查看全部 -
justify-content設(shè)置網(wǎng)格容器內(nèi)的王哥哥沿著行軸對(duì)齊王哥的對(duì)齊方式
.container{
justify-content:satart | end | center | strech | space-around | space-between | space-evenly;
}
查看全部 -
justify-items:start center end?
align-items:start center end?
place-items:center;
查看全部 -
justify-items
沿著行軸對(duì)齊網(wǎng)格內(nèi)的內(nèi)容
.container{
justify-items:start | end | center | stretch;
}
查看全部 -
grid-gap?
grid-row-gap 和grid-column-gap 的縮寫
.container{
grid-gap:<grid-row-gap><grid-column-gap>;
}
查看全部 -
屬性值
line-size:長(zhǎng)度值
。container{
grid-column-gap:10px;
grid-row-gap:15px;
}
查看全部 -
gap?
grid-columns-gap/grid-row-gap
指定網(wǎng)格線的大小，可以想像為設(shè)置列/行之間的間距的寬度
.container{
grid-columns-gap:<line-sezi>;
grid-row-gap:<line-size>;
}
查看全部 -
.container{
grid-template-rows:[row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns:auto 50px auto;
grid-template-areas:"header header header"
"footer footer footer";
}
查看全部
舉報(bào)