Grid 布局
基本布局
flex 容器配置 grid-gutters="1" ~ "5" 为基本间隙
混合布局(自定义宽度)
flex 元素配置 grid-cell-1 ~ 12 等样式
响应式布局
单个 grid 元素配置 grid-(sm | md | xl)-(1-12)
垂直顶部对齐
flex 容器配置 grid-top
垂直底部对齐
flex 容器配置 grid-bottom
垂直居中
flex 容器配置 grid-center
混合垂直居中
flex 元素配置 grid-cell-top grid-cell-center grid-cell-bottom
水平左对齐
flex container 配置 grid-jc-start,flex item 配置无拉伸因子的类即 grid-cell-x
水平右对齐
flex container 配置 grid-jc-end,flex item 配置无拉伸因子的类即 grid-cell-x
水平居中对齐
flex container 配置 grid-jc-center,flex item 配置无拉伸因子的类即 grid-cell-x
水平两端对齐
flex container 配置 grid-jc-between,flex item 配置无拉伸因子的类即 grid-cell-x
水平均分对齐
flex container 配置 grid-jc-around,flex item 配置无拉伸因子的类即 grid-cell-x
偏移
flex 元素配置 offset-1 ~ offset-12 (8.33333% ~ 100%)