gride布局

gride布局
gride布局和flex布局的区别在于，gride是二维的布局方式，flex是一维的，只能水平或者垂直布局。

目录

gride容器属性

gride子属性

---

gride容器属性

首先用display: gride或者inline-gride申明布局方式，和flex的申明布局意思相同。
使用gride画好虚拟的表格，例如："gride: 30px auto 30px / 10% 1fr 10%" 表示三行三列，前三个数字分别表示每行的高度，后三个数字分别表示每列的宽度。
gride-gap 在行和列之间创造空隙。
justfy-items 设置元素子项在自己格子里水平的位置。属性值start, end, center, stretch。
justfy-content 设置整体的gride布局在自己父容器中水平的位置，属性值和flex的justfy-content相同
align-items 设置元素子项在自己格子里垂直的位置。属性值start, end, center, stretch。
align-content 设置整体的gride布局在自己父容器中垂直的位置，取值和justfy-content相同。

gride子属性

gride-row 设定行的位置，例如：gride-row: 1 / 2 表示一二行之间，或者gride-row: 1 / span 2表示第一行起，跨两行。
gride-column 设定列的位置，使用方法同上。
gride-area 是gride-row和gride-column的结合，例如gride-area: 1(行始)/1(列始)/2(行终)/3(列终）。
align-self 给单个元素设置垂直方向的位置。
justfy-self 给单个元素设置水平方向的位置。