Grid布局
2020-09-06 18:24:37 11 举报AI智能生成
css grid布局属性清单
作者其他创作
大纲/内容
容器属性
display: grid|inline-grid
开启grid网格布局
grid-template-rows
定义每一行的行高
grid-template-columns
定义每一列的列宽
gap
设置行间距和列间距
grid-template-areas
给网格线划分的区域进行命名
grid-auto-flow
设置网格排列方式
justify-content
所有项目在容器中水平方向的位置
align-content
所有项目在容器中垂直方向的位置
place-content
align-content属性和justify-content两个属性的简写
justify-items
项目在单元格中水平方向的位置
align-items
项目在单元格中垂直方向的位置
place-items
是align-items属性和justify-items属性的简写
grid-auto-columns
针对没有在预先设定好的网格内的元素的列宽
grid-auto-rows
针对没有在预先设定好的网格内的元素的行高
项目属性
grid-row-start
设置项目起始位置的行所在的网格线
grid-row-end
设置项目结束位置的行所在的网格线
grid-column-start
设置项目起始位置的列所在的网格线
grid-column-end
设置项目结束位置的列所在的网格线
grid-row
grid-row-start和grid-row-end的简写属性
grid-column
grid-column-start和grid-column-end的简写属性
grid-area
给项目设置具体的单元格位置
justify-self
具体某个项目在所属单元格中的水平位置
align-self
具体某个项目在所属的单元格中的垂直位置
place-self
是algin-self属性和justify-self属性的简写属性
其他
repeat()函数
可以重复指定次数
fr
单位，按照比例进行划分
atuo-fill
自动填充
用在设置行和列的属性上，可以根据容器总宽度和总高度自动生成合适的列数和行数
网格线命名
grid-template-rows: [x1-start] 100px [x1-end x2-start] 100px [x2-end x3-start] 100px [x3-end];
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
grid-template-rows: repeat(3, [r] 100px);
span关键字
可以设置跨越的具体单元格个数
minmax()函数
产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
auto关键字
auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
0 条评论
下一页
