GRID布局

GRID布局

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

格布局设置:
display:;
grid
inline-grid

容器(父元素):
划分行:
grid-template-rows:;
px
%
fr
重复: repeat(行数,均分fr)

划分列:
grid-template-columns:;
px
%
fr
重复: repeat(列数,均分fr)

划分区域:
grid-template-areas:
“区域1 区域2 区域3”
“区域4 区域5 区域6”;
注意:必须分了行和列,子元素占区域时,需要结合项目属性grid-area:区域名字;

行间距 列间距
grid-row-gap:10px;行间距
grid-column-gap:4px;列间距
综合写法:grid-gap:行间距 列间距;

综合写法:
grid-template:“分区” “分区” “分区” 分行/分列;

网格整体垂直 水平位置
align-content:;
justify-content:;
start 起始位置
end 结束位置
center 居中
stretch 默认值,项目没有指定大小,拉伸占据真个网格大小
space-around 两端平分
space-between 两端对齐
space-evenly 平均分配剩余空间
综合写法: 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:垂直位置 水平位置;