Grid 栅格

基本使用

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12

区块间隔

水平 gutter 为固定值
col-3
col-3
col-3
col-3
水平 gutter 为响应式
col-3
col-3
col-3
col-3
水平和垂直 gutter 均为固定值
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
水平 gutter 响应式,垂直 gutter固定值
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
水平和垂直 gutter 均为响应式
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3

左右偏移

col-4
col-4 col-offset-4
col-3 col-offset-3
col-3 col-offset-3
col-6 col-offset-3

排序

col-9 col-pull-3
col-3 col-pull-9

次序

1 col-3-order-4
2 col-3-order-3
3 col-3-order-2
4 col-3-order-1

排版

align left
col-2
col-2
col-2
col-2
align center
col-2
col-2
col-2
col-2
align right
col-2
col-2
col-2
col-2
space-between
col-2
col-2
col-2
col-2
space-around
col-2
col-2
col-2
col-2

对齐

align top

col-3
col-3
col-3
col-3

align middle

col-3
col-3
col-3
col-3

align bottom

col-3
col-3
col-3
col-3

flex

2 / 5
3 / 5
100px
auto
1 1 200px
0 1 300px
none
auto with no-wrap

响应式布局

宽度响应式
Col
Col
其他属性响应式(支持span,offset,order,pull,push)
Col

Row Props

名称类型默认值说明必传
alignStringtop纵向对齐方式,CSS 属性 align-items 值。其中 topstart 等效;middlecenter 等效;bottomend 等效。可选项:start/end/center/stretch/baseline/top/middle/bottomN
gutterNumber / Object / Array0栅格间隔,示例:{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }。当数据类型为 Number 和 Object 时,用于指定横向间隔。当数据类型为数组时,第一个参数为横向间隔,第二个参数为纵向间隔, [水平间隔, 垂直间隔]。TS 类型:number | GutterObject | Array<GutterObject | number> interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } 详细类型定义N
justifyStringstartflex 布局下的水平排列方式。可选项:start/end/center/space-around/space-betweenN
tagStringdiv自定义元素标签N

Col Props

名称类型默认值说明必传
flexString / Number-flex 布局填充。CSS 属性 flex 值。示例:2 / 3 / '100px' / 'auto' / '1 1 200px'N
lgNumber / Object-≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象(小尺寸电脑)。TS 类型:number | BaseColPropsN
mdNumber / Object-≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象(超小尺寸电脑)。TS 类型:number | BaseColPropsN
offsetNumber0栅格左侧的间隔格数,间隔内不可以有栅格N
orderNumber0栅格顺序,flex 布局模式下有效N
pullNumber0栅格向左移动格数N
pushNumber0栅格向右移动格数N
smNumber / Object-≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象(平板)。TS 类型:number | BaseColPropsN
spanNumber-栅格占位格数,为 0 时相当于 display: noneN
tagStringdiv自定义元素标签N
xlNumber / Object-≥1400px 响应式栅格,可为栅格数或一个包含其他属性的对象(中尺寸电脑)。TS 类型:number | BaseColPropsN
xsNumber / Object-<768px 响应式栅格,可为栅格数或一个包含其他属性的对象(手机)。TS 类型:number | BaseColProps interface BaseColProps { offset: number; order: number; pull: number; push: number; span: number }详细类型定义N
xxlNumber / Object-≥1880px 响应式栅格,可为栅格数或一个包含其他属性的对象(大尺寸电脑)。TS 类型:number | BaseColPropsN

何时使用

栅格通常用于内容区域的布局设计。

推荐/慎用示例

在栅格中放置内容区块时,内容区块的位置应该从列开始,到列结束。

一行中不建议放置过多内容区块,内容区块数量建议控制在 4 个以内。

更多栅格使用可参考: 全局样式-Layout 布局