GRID属性

GRID属性(设为网格布局)
display:grid;
display:inline-grid;

容器（父元素）：

• 网格布局

grid-template-rows:; (单位：px/%/fr, auto)
grid-template-columns:;
重复行列
grid-template-rows:repeat(3,1fr); 划分三行每行均分
grid-template-columns:repeat(3,1fr); 划分三列每列均分
划分区域（必须划分行列）
grid-template-areas:
"a1 a1 a1"
"a2 a3 a3";
综合写法：
grid-template:分区 分行/分列;
【例】grid-template:
"a1 a1 a2" 1fr
"a3 a3 a2" 1fr
"a3 a3 a4" 1fr/1fr 1fr 1fr;

• 行列间距

grid-row-gap:10px;
grid-column-gap:10px;
综合写法：
grid-gap:行间距 列间距;（只写一个值，行列间距一样）

• 网格整体的垂直/水平 位置

align-content:;
justify-content:;
start 起始位置
end 结束位置
center 居中
space-around 两端平均
space-between 两端对齐
space-evenly 平均分配
stretch 默认值，项目没有指定大小，拉伸占据整个网格
综合写法：
place-content:垂直 水平;

• 指定网格的垂直/水平 呈现位置

align-items:;
justify-items:;
start 起始位置
end 结束位置
center 居中
stretch 默认值，项目没有指定大小，拉伸占据整个网格
综合写法：
place-items:垂直 水平;

 

项目（子元素）：

 

grid-area:占区域;注意: 需要分区才可以使用
方式一:
grid-area:a1;
方式二:
grid-area:行起点/列起点/行结束/列结束;

grid-column-start:列线开始;
grid-column-end:列线结束;
grid-row-start:行线开始;
grid-row-end:行线结束;

只有end才有span 意思是占几个网格 3指占3个
grid-column-end:span 3;
grid-row-end:span 2;

单个元素在网格的垂直 水平对齐方式
align-self:;
justify-self:;
start 起始位置
end 结束位置
center 居中
stretch 默认值,项目没有指定大小,拉伸占据真个网格大小
综合写法: place-self:垂直位置 水平位置;