This grid system provides response rules for almost all mainstream resolution scenes such as 320, 480, 720, 990, 1200, and 1500. The responsive grids are implemented using a 24-column and a 5-point to meet 2, 3, 4, 5, and 6 ratio layouts. The fixed grid uses a 20px width as the unit, it is recommended to use 9, 10, 12, 14, 16, 18, 24, but all from 1 to 30 are also available. You can also customize the fixed grid columns according to your requirements. The breakpoint are: xss(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px). Based on the Flex implementation, IE9 is compatible with display:table;, but IE9 only supports basic responsive layouts (see API and DEMO for details).
Though we have build-in support of a11y by adding <Row> and <Col> with role="row" and role="gridcell" respectively, in order to achieve more a11y compliance, developers are also expected to add role="grid" in the outer wrapper element, as this:
<div role="grid">\n <Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>\n <Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>\n</div>\n| Param | \nDescription | \nType | \nDefault Value | \nRequired | \n
|---|---|---|---|---|
| children | \nRow content | \nReact.ReactNode | \n- | \n\n |
| gutter | \nColumn spacing | \nstring | number | \n0 | \n\n |
| wrap | \nWhether to wrap when the column width overflows in the row | \nboolean | \nfalse | \n\n |
| fixed | \nWhether the row width remains unchanged at a breakpoint (the default row width changes with the viewport) | \nboolean | \nfalse | \n\n |
| fixedWidth | \nThe width of the fixed row is the width of a breakpoint, which is not affected by the viewport | \nBreakPoints | \n- | \n\n |
| align | \n(IE9 browser is not supported) Multi | \n'top' | 'center' | 'bottom' | 'baseline' | 'stretch' | \n- | \n\n |
| justify | \n(IE9 browser is not supported) Layout method when there is extra space in the row | \n'start' | 'center' | 'end' | 'space-between' | 'space-around' | \n- | \n\n |
| hidden | \nDisplay and hide the row at different breakpoints | \nboolean | string | Array<BreakPoints> | \n- | \n\n |
| component | \nSpecifies the element with which to render the node | \nstring | FunctionComponent<unknown> | ComponentClass<unknown> | \n'div' | \n\n |
| Param | \nDescription | \nType | \nDefault Value | \nRequired | \n
|---|---|---|---|---|
| children | \nColumn content | \nReact.ReactNode | \n- | \n\n |
| span | \nColumn width | \nstring | number | \n- | \n\n |
| fixedSpan | \nFixed column width | \nstring | number | \n- | \n\n |
| offset | \n(IE9 browser is not supported) Column offset | \nstring | number | \n- | \n\n |
| fixedOffset | \n(IE9 browser is not supported) Fixed column offset, width value is 20 * grid number<br><br>Optional values: 1, 2, 3, ..., 28, 29, 30 | \nstring | number | \n- | \n\n |
| align | \n(IE9 browser is not supported) Multi | \n'top' | 'center' | 'bottom' | 'baseline' | 'stretch' | \n- | \n\n |
| hidden | \nDisplay and hide the column at different breakpoints | \nboolean | string | Array<BreakPoints> | \n- | \n\n |
| xxs | \n>=320px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| xs | \n>=480px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| s | \n>=720px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| m | \n>=990px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| l | \n>=1200px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| xl | \n>=1500px, responsive grid | \nstring | number | PointProps | \n- | \n\n |
| component | \nSpecifies the element with which to render the node, default is 'div' | \nEle | (() => Ele) | string | \n'div' | \n\n |