GRID属性

Posted 2021-03-03 strongerpian

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-column-start:1;
grid-column-end:2;

• 单元格在行线的起止位置

grid-row-start:1;
grid-row-end:2;

 

项目（子元素）：

 

需要父级分区
第一种： grid-area:a1;
第二种： grid-area:2/1/4/3; 行线起点/列线起点/行线结束/列线结束
不需要父级分区 （只有end才有span，意思是占几格网络）
grid-column-end:span 3;
grid-row-end:span 3;

• 单个元素在网格的垂直/水平对齐方式 align-self:;
  justify-self:;
  综合写法：
  place-self:垂直 水平;