这里我大概分为三大类:
第一类:如何去定义一个网格系统,行列及间距等
- display:grid/inline-grid,定义使用网格系统
- grid-template-columns:定义垂直栏
- grid-template-rows:定义水平行
- grid-template-areas:定义区域
- grid-column-gap:定义垂直栏与垂直栏之间的间距,如上图的A与B之间的间距
- grid-row-gap:定义水平行与水平行之间的间距,如上图的1与2之间的间距
- grid-gap:上面两个栏与行间距的缩写
第二类:对齐的方式,属性跟flex的有点像:
- justify-items:item在水平行中的对齐方式
- align-items:item在垂直栏中的对齐方式
- justify-content:整个水平行在grid范围的对齐方式,这里有个好用的
space-evenly
值,补足了以前flex的space-around
和space-between
的不足 - align-content:整个垂直栏在grid范围的对齐方式
第三类:自动分配形式,当定义的行或列数量不够时,item的自动排列方式
- grid-auto-columns:定义多出的item的自动column的宽度大小
- grid-auto-rows:定义多出的item自动row的高度大小
- grid-auto-flow:定义自动item是按照先水平方向排列还是垂直方向排列
最后一个为所有属性的简写grid
接下来是我们的item属性,同样这里我也将它分为两类
第一类:单元格所占格子多少
- grid-column-start:item的起始栏
- grid-column-end:item的结束栏
- grid-column:起始栏和结束栏的简写
- grid-row-start:item的起始行
- grid-row-end:item的结束行
- grid-row:起始行与结束行的简写
- grid-area:item所在区域
第二类:单元格的自定义对齐方式,这个跟flexbox的item有点相似
- justify-self:自定义item的水平方向对齐方式
- align-self:自定义item的垂直方向对齐方式