Grid 布局

基本布局

flex 容器配置 grid-gutters="1" ~ "5" 为基本间隙
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4

混合布局(自定义宽度)

flex 元素配置 grid-cell-1 ~ 12 等样式
1/2
auto
auto
auto
1/3

响应式布局

单个 grid 元素配置 grid-(sm | md | xl)-(1-12)
auto/2
auto/2
auto/3
auto/3
auto/3

嵌套布局

1/1
1/2
2/2

垂直顶部对齐

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%)
offset-1
offset-3
offset-3
offset-4
offset-6
offset-7