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