grid布局
属性介绍
grid-template-columns
: 列宽grid-template-rows
:行宽repeat()
:简化重复的值auto-fill
:自动填充fr
:可用空间的一等分minmax()
:长度范围- 间距
grid-row-gap
:行间距grid-column-gap
:列间距grip-gap
:行间距 列间距grid-row-gap
: 10px 表示行间距是 10px,grid-column-gap
: 20px 表示列间距是 20px。grid-gap
: 10px 20px 实现的效果是一样的
grid-template-areas
:定义区域grid-area
:容器名称,配合grid-template-areas
进行空间布局grid-auto-flow
:自动布局,规定大小空间不足时会自动换行/列- 先行后列:
grid-auto-flow:row
,配合grid-template-colums
规定每列大小 - 先列后行:
grid-auto-flow:column
,配合grid-template-colums
规定每行大小 grid-auto-flow: row dense
:不留空,尽量填满
- 先行后列:
justify-items
:单元格内容的水平位置aligh-items
:单元格的垂直位置grid-column
;占据的列数范围,左闭右开(grid-column: 1/3;
占据[1,3)列)grid-row
:占据行数范围
评论
匿名评论
你无需删除空行,直接评论以获取最佳展示效果