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 给单个元素设置水平方向的位置。