-
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";
}
查看全部
举报