Grid布局是一个二维的布局方法,横纵两个方向同时存在。
属性(作用在父容器上)
-
grid-template-columns:划分网格列数(单位可以是像素、百分比、自适应及fr比例单位)
例:
grid-template-columns:50px 50px;
grid-template-columns:50% 50%;
grid-template-columns:repeat(3,1fr); //分成均匀的3列 -
grid-template-rows:划分网格行数(单位可以是像素、百分比、自适应及fr比例单位)
-例:
grid-template-rows:50px 50px;
grid-template-rows:50% 50%;
grid-template-rows:repeat(3,1fr); //分成均匀的3行 -
grid-template-areas:给网格划分区域的
-
grid-template: grid-template-rows、grid-template-columns和grid-template-areas的复合属性
例:
grid-template:
‘a1 a2 a3’ 1fr
‘a4 a5 a6’ 1fr
/1fr 1fr 1fr; //等分成二行三列 -
grid-column-gap:定义网格中列之间的空隙
-
grid-row-gap:定义网格中行之间的空隙
-
grid-gap:grid-column-gap和grid-row-gap的复合写法,行前列后
-
justify-content:网格的横向排列方式
-
align-content:网格的纵向排列方式
-
place-content:justify-content和align-content的复合写法,纵向前横向后,空格隔开
例:
stretch //垂直或水平填充
start //左侧或顶部对齐
center //水平或垂直居中对齐
end //右侧或底部对齐
space-between //两端对齐
space-around //享受独立不重叠空白空间
space-evenly //平均分配空白空间 -
justify-items:网格内元素的水平排列方式
-
align-items:网格内元素的垂直排列方式
-
place-items:justify-items和align-items的复合写法,纵向前横向后,空格隔开
-
例:
stretch //垂直或水平拉伸
start //左侧或顶部对齐
center //水平或垂直居中对齐
end //右侧或底部对齐
属性(作用在子项上)
- grid-column-start:水平方向占据的起始位置
- grid-column-end:水平方向占据的结束位置
- grid-column:grid-column-start和grid-column-end的复合写法
- grid-row-start:垂直方向占据的起始位置
- grid-row-end:垂直方向占据的结束位置
- grid-row:grid-row-start和grid-row-end的复合写法
- grid-area:表示当前网格所占区域,名字和位置两种表示方法
- justify-self:单个网格水平对齐方式
- align-self:单个网格垂直对齐方式
- place-self:justify-self和align-self的复合写法