grid网格布局
diaplay:;
grid
inline-grid
容器(父元素)属性:
划分行:
grid-template-rows
单位:
px
%
fr
重复:repeat(行数,fr)
划分列:
grid-template-columns
单位:
px
%
fr
重复:repeat(列数,fr)
综合写法:grid-template:repeat(行数,fr)/repeat(列数,fr)
grid-template-areas:
"区域1 区域2 区域3"(单引号 双引号 都可以)
"区域1 区域4 区域5";
注意:必须分了行和列,子元素占区域时,需要结合项目属性grid-area:区域名字;
综合写法:grid-template:"分区" "分区" "分区" 分行/分列;
例子:
"a1 a2 a3 1fr"
"a1 a2 a3 1fr"
"a1 a2 a3 1fr/1fr 1fr 1fr"
行间距:grid-row-gap:;
列间距:grid-column-gap:;
综合写法:grid-gap:行间距 列间距;(只写一个值,行间距与列间距一样)
注意:间距不会撑大父元素,而会使子元素之间自动分配压缩大小
网格整体水平位置
justify-content:;
start 起始位置
end 结束位置
center 居中
strench 默认值,项目没有指定大小,拉伸占据整个网格大小
space-around 两端平分
space-between 两端对齐
space-enenly 平均分配剩余空间
网格整体垂直位置
align-content:;
start 起始位置
end 结束位置
center 居中
strench 默认值,项目没有指定大小,拉伸占据整个网格大小
综合写法 place-content:垂直位置 水平位置;
指定网格的垂直水平呈现方式
align-items
justify-items
start 起始位置
end 结束位置
center 居中
strench 默认值,项目没有指定大小,拉伸占据整个网格大小
综合写法 place-items:垂直位置 水平位置;
项目(子元素)属性
grid-area:划分区域 注:需要分区才可以使用
方式一:
grid-area:“a1”
方式二:
grid-area:行起点/列起点/行结束/列结束;(利用网格线序号)
grid-row-start 行线开始数
grid-row-end 行线结束数
grid-column-start 列线开始数
grid-column-end 列线结束数
只有end才有span 意思是占几个网格 3指3个
grid-column-end:span 3;
grid-row-end:span 2;
单个元素在网格的垂直 水平对齐方式
align-self:;
justify-self:;
start 起始位置
end 结束位置
center 居中
strench 默认值,项目没有指定大小,拉伸占据整个网格大小
综合写法 place-self:垂直位置 水平位置;