Grid 栅格

开发指南

基本使用

此栅格系统提供了320,480,720, 990,1200,1500等几乎所有主流分辨率场景的响应规则。
响应式栅格采用24列栅格体系和5分比实现,以满足2,3,4,5,6分比布局等多种情况。
固定栅格采用 20px 宽度作为单位栅格, 推荐使用9,10,12,14,16,18,24,但同时也提供了从1到30的所有栅格,也可根据需求定制固定栅格列。
响应式断点阈值为:xxs(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。
基于Flex实现,对 IE9 通过 display:table; 兼容实现,但 IE9 仅支持基本的响应式布局(详情请参考 API 和 DEMO 的说明)。

无障碍

默认 <Row><Col> 会加上 role="row"role="gridcell", 但是为了完美的无障碍实现, 开发者还应该在外部容器加上 role="grid"。示例代码如下:

<div role="grid">
    <Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>
    <Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>
</div>
One
col-24
Two
col-12
col-12
Three
col-8
col-8
col-8
Four
col-6
col-6
col-6
col-6
Five
col-1p5
col-1p5
col-1p5
col-1p5
col-1p5
Six
col-4
col-4
col-4
col-4
col-4
col-4

基础布局

通过 Colspan 属性指定该列宽度占整行宽度 24 分之几或 5 分之几。

Two-column layout, left column fixed, right column adaptive
col-fixed-16
col
Two-column layout, right column fixed, left column adaptive
col
col-fixed-16
Three-column layout, left column and right column fixed, middle column adaptive
col-fixed-8
col
col-fixed-8

固定宽度列

通过 ColfixedSpan 属性来指定某列为固定宽度列,其宽度的计算方式为 20 * fixedSpan。

0481216
col-6
col-6
col-6
col-6

列间距

列与列间距默认为 0,可以通过设置 Rowgutter 属性来改变列间距。

No wrap
col-6
col-6
col-6
col-8
Wrap
col-6
col-6
col-6
col-8

溢出后是否换行

(不支持 IE9 浏览器)默认列在行中宽度溢出后不会换行,如果想自动换行,请为 Row 设置 wrap 为 true。

col-10-6
col-10-18
col-14-18
col-14-6

嵌套布局

Col 下也可嵌套 Row,以完成更细致的布局。

Resize browser to see how each column changes
Col
Col
Col

响应式布局

类似 Bootstrap 的响应式设计,预设 6 个响应尺寸:xxs(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。

Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown
col-8
col-16
Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown
col-8
col-16
Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown
col-8
col-16

显示与隐藏

提供了强大的响应式的显示与隐藏功能,支持在不同断点下的显示与隐藏。

Default
100%
Set fixed to true
Set fixedWidth to 's'
720px

设置行的宽度

默认 Row 的宽度被设置为 100%,可以通过设置 fixed 属性为 true,来让 Row 的宽度不立刻随着是视口大小变动而变动,而是在某个断点下维持固定的宽度,也可以通过设置 fixedWidth 属性为某一断点值,从而固定 Row 的宽度,不再随着视口大小变动而变动。

Normal offset, set offset from 1 to 24
offset-0
offset-4
offset-8
offset-12
Adaptive offset
col
offset-12

偏移

(不支持 IE9 浏览器)列可以向右偏移一定距离,该距离的计算方式和列所占宽度计算方式相同。

Normal offset, set offset from 1 to 30
offset-fixed-0
offset-fixed-4
offset-fixed-8
offset-fixed-12
Adaptive offset
col
offset-fixed-12

固定宽度偏移

(不支持 IE9 浏览器)列可以向右偏移一定距离,该距离的计算方式和固定宽度列的宽度相同。

top
col-8
col-8
col-8
center
col-8
col-8
col-8
bottom
col-8
col-8
col-8
baseline
col-8
col-8
col-8
stretch
col-8
col-8
col-8
override
col-8
col-8
col-8

多列垂直方向对齐方式

(不支持 IE9 浏览器)基于 Flex 的 align-items 和 align-self 属性实现,在 Row 上设置 align 属性,即可控制 Row 下面所有 Col 的垂直方向对齐方式:top(顶部对齐,默认),center(居中对齐),bottom(底部对齐),baseline(第一行文字的基线对齐),stretch(如果未设置高度或设为 auto,将占满整个容器的高度);在 Col 上设置 align 属性,可允许它与其它列不一样的对齐方式,覆盖 Rowalign 属性。

start
col-4
col-4
col-4
center
col-4
col-4
col-4
end
col-4
col-4
col-4
space-between
col-4
col-4
col-4
space-around
col-4
col-4
col-4

多列水平方向对齐方式

(不支持 IE9 浏览器)基于 Flex 的 justify-content 属性实现,在 Row 上设置 justify 属性,即可行内多列水平方向对齐方式:start(左对齐,默认),center(居中对齐),end(右对齐),space-between(两端对齐,项目之间的间隔都相),space-around(两侧的间隔相等,列之间的间隔比列与左右两端的间隔大一倍)。

Rendered as `ul` and `li`
  • col-12
  • col-12

自定义元素渲染类型

使用 component 来指定需要渲染的元素类型,默认为 div

API

Grid.Row

参数说明类型默认值
children行内容ReactNode-
gutter列间隔String/Number0
wrap列在行中宽度溢出后是否换行Booleanfalse
fixed行在某一断点下宽度是否保持不变(默认行宽度随视口变化而变化)Booleanfalse
fixedWidth固定行的宽度为某一断点的宽度,不受视口影响而变动

可选值:
'xxs'(320px)
'xs'(480px)
's'(720px)
'm'(990px)
'l'(1200px)
'xl'(1500px)
Enum-
align(不支持IE9浏览器)多列垂直方向对齐方式

可选值:
'top'(顶部对齐)
'center'(居中对齐)
'bottom'(底部对齐)
'baseline'(按第一行文字基线对齐)
'stretch'(未设置高度或设为 auto,将占满整个容器的高度)
Enum-
justify(不支持IE9浏览器)行内具有多余空间时的布局方式

可选值:
'start'(左对齐)
'center'(居中对齐)
'end'(右对齐)
'space-between'(两端对齐,列之间间距相等)
'space-around'(每列具有相同的左右间距,行两端间距是列间距的二分之一)
Enum-
hidden行在不同断点下的显示与隐藏

可选值:
true(在所有断点下隐藏)
false(在所有断点下显示)
'xs'(在 xs 断点下隐藏)
'xxs', 'xs', 's', 'm', 'l', 'xl'(在 xxs, xs, s, m, l, xl 断点下隐藏)
Boolean/String/Array-
component指定以何种元素渲染该节点
- 默认为 'div'
String/Function'div'

Grid.Col

参数说明类型默认值
children列内容ReactNode-
span列宽度

可选值:
1, 2, 3, ..., 22, 23, 24
String/Number-
fixedSpan固定列宽度,宽度值为20 * 栅格数

可选值:
1, 2, 3, ..., 28, 29, 30
String/Number-
offset(不支持IE9浏览器)列偏移

可选值:
1, 2, 3, ..., 22, 23, 24
String/Number-
fixedOffset(不支持IE9浏览器)固定列偏移,宽度值为20 * 栅格数

可选值:
1, 2, 3, ..., 28, 29, 30
String/Number-
align(不支持IE9浏览器)多列垂直方向对齐方式,可覆盖Row的align属性

可选值:
'top', 'center', 'bottom', 'baseline', 'stretch'
Enum-
hidden列在不同断点下的显示与隐藏

可选值:
true(在所有断点下隐藏)
false(在所有断点下显示)
'xs'(在 xs 断点下隐藏)
'xxs', 'xs', 's', 'm', 'l', 'xl'(在 xxs, xs, s, m, l, xl 断点下隐藏)
Boolean/String/Array-
xxs>=320px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
xs>=480px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
s>=720px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
m>=990px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
l>=1200px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
xl>=1500px,响应式栅格,可为栅格数(span)或一个包含栅格数(span)和偏移栅格数(offset)对象String/Number/Object-
component指定以何种元素渲染该节点,默认为 'div'String/Function'div'