Grid 栅格

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

基本使用

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

Grid.Row

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
children行内容ReactNode-
type布局方式 可选值:'fluid'(流体布局，仅设置最大宽度，宽度为各断点值，两侧根据分辨率情况自动留白)'fixed'(固定宽度布局)'wrap'(单行模式，列在行中宽度溢出后换行)'no-wrap'(单行模式，列在行中宽度溢出后不换行)'no-padding'(行边距以及所有列间距都为0)'across'(通栏模式, 行边距为0)'fixed'/'fluid', 'wrap'/'no-wrap', 'no-padding', 'across'可组合使用，例如: 'fixed', 'wrap', 'no-padding', 'across'String/Array<String>默认布局方式为 display:flex;width:100%;，两侧有边距留白。
fixedWidth固定宽度布局，指定固定宽度值后不再受断点值影响而变动可选值:'xxs'(320px)'xs'(480px)'s'(720px)'m'(990px)'l'(1200px)'xl'(1500px)Enum-
align(不支持IE9及以下浏览器)多列垂直方向对齐方式可选值:'top'(顶部对齐)'center'(居中对齐)'bottom'(底部对齐)'baseline'(第一行文字基线对齐)'stretch'(未设置高度或设为auto，将占满整个容器的高度，另还需手动设置 width:100%)Enum'stretch'
justify(不支持IE9及以下浏览器)行内具有多余空间时的布局方式可选值:'start'(左对齐)'center'(居中对齐)'end'(右对齐)'space-between'(两端对齐，列之间间距相等)'space-around'(每列具有相同的左右间距，行两端间距是列间距的二分之一)Enum'start'

Grid.Col

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内联样式Object-
children列内容ReactNode-
span列宽度可选值:1, 2, 3, …, 22, 23, 24String/Number-
fixedSpan固定列宽度，宽度值为20 栅格数可选值:1, 2, 3, …, 28, 29, 30String/Number-
offset（不支持IE9及以下浏览器）列偏移可选值:1, 2, 3, …, 22, 23, 24String/Number-
fixedOffset（不支持IE9及以下浏览器）固定列偏移，宽度值为20 栅格数可选值:1, 2, 3, …, 28, 29, 30String/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-

代码示例

多列垂直方向对齐方式

（不支持IE9及以下浏览器）使用Flex的align-items和align-self属性实现，在Row上设置align属性，可控制Row下面所有Col的垂直方向对齐方式：start（顶部对齐，默认），center（居中对齐），end（底部对齐），baseline（第一行文字的基线对齐），stretch（如果未设置高度或设为auto，将占满整个容器的高度）；在Col上设置align属性，可允许它与其它列不一样的对齐方式，可覆盖Row的align属性。

Grid 栅格 - 图1

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">顶部对齐</div>
  8.     <Row className="demo-row" align="top">
  9.       <Col span="8">
  10.         <div
  11.           className="demo-col-inset"
  12.           style={{ height: "100px", lineHeight: "100px" }}
  13.         >
  14.           col-8
  15.         </div>
  16.       </Col>
  17.       <Col span="8">
  18.         <div
  19.           className="demo-col-inset"
  20.           style={{ height: "50px", lineHeight: "50px" }}
  21.         >
  22.           col-8
  23.         </div>
  24.       </Col>
  25.       <Col span="8">
  26.         <div
  27.           className="demo-col-inset"
  28.           style={{ height: "150px", lineHeight: "150px" }}
  29.         >
  30.           col-8
  31.         </div>
  32.       </Col>
  33.     </Row>
  35.     <div className="demo-title">居中对齐</div>
  36.     <Row className="demo-row" align="center">
  37.       <Col span="8">
  38.         <div
  39.           className="demo-col-inset"
  40.           style={{ height: "100px", lineHeight: "100px" }}
  41.         >
  42.           col-8
  43.         </div>
  44.       </Col>
  45.       <Col span="8">
  46.         <div
  47.           className="demo-col-inset"
  48.           style={{ height: "50px", lineHeight: "50px" }}
  49.         >
  50.           col-8
  51.         </div>
  52.       </Col>
  53.       <Col span="8">
  54.         <div
  55.           className="demo-col-inset"
  56.           style={{ height: "150px", lineHeight: "150px" }}
  57.         >
  58.           col-8
  59.         </div>
  60.       </Col>
  61.     </Row>
  63.     <div className="demo-title">底部对齐</div>
  64.     <Row className="demo-row" align="bottom">
  65.       <Col span="8">
  66.         <div
  67.           className="demo-col-inset"
  68.           style={{ height: "100px", lineHeight: "100px" }}
  69.         >
  70.           col-8
  71.         </div>
  72.       </Col>
  73.       <Col span="8">
  74.         <div
  75.           className="demo-col-inset"
  76.           style={{ height: "50px", lineHeight: "50px" }}
  77.         >
  78.           col-8
  79.         </div>
  80.       </Col>
  81.       <Col span="8">
  82.         <div
  83.           className="demo-col-inset"
  84.           style={{ height: "150px", lineHeight: "150px" }}
  85.         >
  86.           col-8
  87.         </div>
  88.       </Col>
  89.     </Row>
  91.     <div className="demo-title">第一行文字基线对齐</div>
  92.     <Row className="demo-row" align="baseline">
  93.       <Col span="8">
  94.         <div
  95.           className="demo-col-inset"
  96.           style={{ height: "100px", paddingTop: "20px", fontSize: "30px" }}
  97.         >
  98.           col-8
  99.         </div>
  100.       </Col>
  101.       <Col span="8">
  102.         <div
  103.           className="demo-col-inset"
  104.           style={{ height: "50px", paddingTop: "20px", fontSize: "20px" }}
  105.         >
  106.           col-8
  107.         </div>
  108.       </Col>
  109.       <Col span="8">
  110.         <div
  111.           className="demo-col-inset"
  112.           style={{ height: "150px", paddingTop: "20px", fontSize: "40px" }}
  113.         >
  114.           col-8
  115.         </div>
  116.       </Col>
  117.     </Row>
  119.     <div className="demo-title">
  120.       占满整个容器的高度（需要将width设置为100%）
  121.     </div>
  122.     <Row className="demo-row" align="stretch">
  123.       <Col span="8">
  124.         <div className="demo-col-inset" style={{ width: "100%" }}>
  125.           col-8
  126.         </div>
  127.       </Col>
  128.       <Col span="8">
  129.         <div className="demo-col-inset" style={{ width: "100%" }}>
  130.           col-8
  131.         </div>
  132.       </Col>
  133.       <Col span="8">
  134.         <div className="demo-col-inset" style={{ width: "100%" }}>
  135.           col-8
  136.         </div>
  137.       </Col>
  138.     </Row>
  140.     <div className="demo-title">单独设置列对齐方式</div>
  141.     <Row className="demo-row" align="top">
  142.       <Col span="8">
  143.         <div
  144.           className="demo-col-inset"
  145.           style={{ height: "100px", lineHeight: "100px" }}
  146.         >
  147.           col-8
  148.         </div>
  149.       </Col>
  150.       <Col span="8" align="bottom">
  151.         <div
  152.           className="demo-col-inset"
  153.           style={{ height: "50px", lineHeight: "50px" }}
  154.         >
  155.           col-8
  156.         </div>
  157.       </Col>
  158.       <Col span="8">
  159.         <div
  160.           className="demo-col-inset"
  161.           style={{ height: "150px", lineHeight: "150px" }}
  162.         >
  163.           col-8
  164.         </div>
  165.       </Col>
  166.     </Row>
  167.   </div>,
  168.   mountNode
  169. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

基础布局

默认使用flex实现，IE9及其以下版本使用display:table;实现。通过Col的span属性指定该列占24分之几的空间。Row为栅格系统的最外层容器（行），里面包括多个Col（列）。

Grid 栅格 - 图2

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">单列</div>
  8.     <Row className="demo-row">
  9.       <Col span="24">
  10.         <div className="demo-col-inset">col-24</div>
  11.       </Col>
  12.     </Row>
  14.     <div className="demo-title">两列</div>
  15.     <Row className="demo-row">
  16.       <Col span="12">
  17.         <div className="demo-col-inset">col-12</div>
  18.       </Col>
  19.       <Col span="12">
  20.         <div className="demo-col-inset">col-12</div>
  21.       </Col>
  22.     </Row>
  24.     <div className="demo-title">三列</div>
  25.     <Row className="demo-row">
  26.       <Col span="8">
  27.         <div className="demo-col-inset">col-8</div>
  28.       </Col>
  29.       <Col span="8">
  30.         <div className="demo-col-inset">col-8</div>
  31.       </Col>
  32.       <Col span="8">
  33.         <div className="demo-col-inset">col-8</div>
  34.       </Col>
  35.     </Row>
  37.     <div className="demo-title">四列</div>
  38.     <Row className="demo-row">
  39.       <Col span="6">
  40.         <div className="demo-col-inset">col-6</div>
  41.       </Col>
  42.       <Col span="6">
  43.         <div className="demo-col-inset">col-6</div>
  44.       </Col>
  45.       <Col span="6">
  46.         <div className="demo-col-inset">col-6</div>
  47.       </Col>
  48.       <Col span="6">
  49.         <div className="demo-col-inset">col-6</div>
  50.       </Col>
  51.     </Row>
  53.     <div className="demo-title">五列</div>
  54.     <Row className="demo-row">
  55.       <Col span="1p5">
  56.         <div className="demo-col-inset">col-1p5</div>
  57.       </Col>
  58.       <Col span="1p5">
  59.         <div className="demo-col-inset">col-1p5</div>
  60.       </Col>
  61.       <Col span="1p5">
  62.         <div className="demo-col-inset">col-1p5</div>
  63.       </Col>
  64.       <Col span="1p5">
  65.         <div className="demo-col-inset">col-1p5</div>
  66.       </Col>
  67.       <Col span="1p5">
  68.         <div className="demo-col-inset">col-1p5</div>
  69.       </Col>
  70.     </Row>
  72.     <div className="demo-title">六列</div>
  73.     <Row className="demo-row">
  74.       <Col span="4">
  75.         <div className="demo-col-inset">col-4</div>
  76.       </Col>
  77.       <Col span="4">
  78.         <div className="demo-col-inset">col-4</div>
  79.       </Col>
  80.       <Col span="4">
  81.         <div className="demo-col-inset">col-4</div>
  82.       </Col>
  83.       <Col span="4">
  84.         <div className="demo-col-inset">col-4</div>
  85.       </Col>
  86.       <Col span="4">
  87.         <div className="demo-col-inset">col-4</div>
  88.       </Col>
  89.       <Col span="4">
  90.         <div className="demo-col-inset">col-4</div>
  91.       </Col>
  92.     </Row>
  93.   </div>,
  94.   mountNode
  95. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

响应式布局

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

Grid 栅格 - 图3

查看源码在线预览

  1. import { Grid, dom } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. const { events } = dom;
  6. const spans = [
  7.   { xs: 12, s: 8, m: 6 },
  8.   { xs: 6, s: 8, m: 6 },
  9.   { xs: 6, s: 8, m: 12 }
  10. ];
  12. const breakpoints = {
  13.   xs: 480,
  14.   s: 720,
  15.   m: 990
  16. };
  18. class Demo extends React.Component {
  19.   componentDidMount() {
  20.     const row = ReactDOM.findDOMNode(this.refs.row);
  21.     const cols = [];
  22.     for (let i = 0; i < row.children.length; i++) {
  23.       cols.push(row.children[i]);
  24.     }
  26.     this.handleResize = () => {
  27.       let point = "";
  28.       const innerWidth =
  29.         window.innerWidth ||
  30.         document.documentElement.clientWidth ||
  31.         document.body.clientWidth;
  32.       const keys = Object.keys(breakpoints);
  33.       for (let i = 0; i < keys.length; i++) {
  34.         const width = breakpoints[keys[i]];
  35.         const nextWidth = breakpoints[keys[i + 1]];
  36.         if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {
  37.           point = keys[i];
  38.           break;
  39.         }
  40.       }
  42.       if (point) {
  43.         cols.forEach((col, index) => {
  44.           const colInset = col.children[0];
  45.           colInset.innerHTML = `col-${spans[index][point]}`;
  46.         });
  47.       }
  48.     };
  49.     events.on(window, "resize", this.handleResize);
  51.     this.handleResize();
  52.   }
  54.   componentWillUnmount() {
  55.     events.off(window, "resize", this.handleResize);
  56.   }
  58.   render() {
  59.     return (
  60.       <div className="demo">
  61.         <div className="demo-title">调整浏览器宽度查看各列所占栅格数变化</div>
  62.         <Row ref="row" className="demo-row">
  63.           {spans.map((span, index) => (
  64.             <Col key={index} {...span}>
  65.               <div className="demo-col-inset" />
  66.             </Col>
  67.           ))}
  68.         </Row>
  69.       </div>
  70.     );
  71.   }
  72. }
  74. ReactDOM.render(<Demo />, mountNode);
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

指定列宽(固定栅格))

基础栅格宽度为20px，可用栅格为1到30，其宽度值为20 * 栅格数。

Grid 栅格 - 图4

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <Row className="demo-row">
  8.       <Col fixedSpan="10">
  9.         <div className="demo-col-inset">col-fixed-10</div>
  10.       </Col>
  11.       <Col fixedSpan="18">
  12.         <div className="demo-col-inset">col-fixed-18</div>
  13.       </Col>
  14.       <Col>
  15.         <div className="demo-col-inset">col</div>
  16.       </Col>
  17.     </Row>
  18.   </div>,
  19.   mountNode
  20. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

显示与隐藏

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

Grid 栅格 - 图5

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">
  8.       在所有断点下隐藏列，调整浏览器宽度查看各列隐藏还是显示
  9.     </div>
  10.     <Row className="demo-row">
  11.       <Col span="8" hidden>
  12.         <div className="demo-col-inset">col-8</div>
  13.       </Col>
  14.       <Col span="16" hidden>
  15.         <div className="demo-col-inset">col-16</div>
  16.       </Col>
  17.     </Row>
  19.     <div className="demo-title">
  20.       在某断点下(m)隐藏列，调整浏览器宽度查看各列隐藏还是显示
  21.     </div>
  22.     <Row className="demo-row">
  23.       <Col span="8" hidden="m">
  24.         <div className="demo-col-inset">col-8</div>
  25.       </Col>
  26.       <Col span="16" hidden="m">
  27.         <div className="demo-col-inset">col-16</div>
  28.       </Col>
  29.     </Row>
  31.     <div className="demo-title">
  32.       在部分断点下(m, l, xl)隐藏列，调整浏览器宽度查看各列隐藏还是显示
  33.     </div>
  34.     <Row className="demo-row">
  35.       <Col span="8" hidden={["m", "l", "xl"]}>
  36.         <div className="demo-col-inset">col-8</div>
  37.       </Col>
  38.       <Col span="16" hidden={["m", "l", "xl"]}>
  39.         <div className="demo-col-inset">col-16</div>
  40.       </Col>
  41.     </Row>
  42.   </div>,
  43.   mountNode
  44. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

多列水平方向对齐方式

（不支持IE9及以下浏览器）使用Flex的justify-content属性实现行内多列水平方向对齐方式：start（左对齐，默认），center（居中对齐），end（右对齐），space-between（两端对齐，项目之间的间隔都相），space-around（两侧的间隔相等，列之间的间隔比列与边框的间隔大一倍）。

Grid 栅格 - 图6

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">左对齐</div>
  8.     <Row className="demo-row" justify="start">
  9.       <Col span="4">
  10.         <div className="demo-col-inset">col-4</div>
  11.       </Col>
  12.       <Col span="4">
  13.         <div className="demo-col-inset">col-4</div>
  14.       </Col>
  15.       <Col span="4">
  16.         <div className="demo-col-inset">col-4</div>
  17.       </Col>
  18.     </Row>
  20.     <div className="demo-title">居中对齐</div>
  21.     <Row className="demo-row" justify="center">
  22.       <Col span="4">
  23.         <div className="demo-col-inset">col-4</div>
  24.       </Col>
  25.       <Col span="4">
  26.         <div className="demo-col-inset">col-4</div>
  27.       </Col>
  28.       <Col span="4">
  29.         <div className="demo-col-inset">col-4</div>
  30.       </Col>
  31.     </Row>
  33.     <div className="demo-title">右对齐</div>
  34.     <Row className="demo-row" justify="end">
  35.       <Col span="4">
  36.         <div className="demo-col-inset">col-4</div>
  37.       </Col>
  38.       <Col span="4">
  39.         <div className="demo-col-inset">col-4</div>
  40.       </Col>
  41.       <Col span="4">
  42.         <div className="demo-col-inset">col-4</div>
  43.       </Col>
  44.     </Row>
  46.     <div className="demo-title">两端对齐，列之间的间隔都相等</div>
  47.     <Row className="demo-row" justify="space-between">
  48.       <Col span="4">
  49.         <div className="demo-col-inset">col-4</div>
  50.       </Col>
  51.       <Col span="4">
  52.         <div className="demo-col-inset">col-4</div>
  53.       </Col>
  54.       <Col span="4">
  55.         <div className="demo-col-inset">col-4</div>
  56.       </Col>
  57.     </Row>
  59.     <div className="demo-title">
  60.       列两侧的间隔相等，列之间的间隔比列与边框的间隔大一倍
  61.     </div>
  62.     <Row className="demo-row" justify="space-around">
  63.       <Col span="4">
  64.         <div className="demo-col-inset">col-4</div>
  65.       </Col>
  66.       <Col span="4">
  67.         <div className="demo-col-inset">col-4</div>
  68.       </Col>
  69.       <Col span="4">
  70.         <div className="demo-col-inset">col-4</div>
  71.       </Col>
  72.     </Row>
  73.   </div>,
  74.   mountNode
  75. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

流式栅格和固定栅格混用

Grid 栅格 - 图7

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">两列布局，左列固定，右列自适应</div>
  8.     <Row className="demo-row">
  9.       <Col fixedSpan="16">
  10.         <div className="demo-col-inset">col-fixed-16</div>
  11.       </Col>
  12.       <Col>
  13.         <div className="demo-col-inset">col</div>
  14.       </Col>
  15.     </Row>
  17.     <div className="demo-title">两列布局，右列固定，左列自适应</div>
  18.     <Row className="demo-row">
  19.       <Col>
  20.         <div className="demo-col-inset">col</div>
  21.       </Col>
  22.       <Col fixedSpan="16">
  23.         <div className="demo-col-inset">col-fixed-16</div>
  24.       </Col>
  25.     </Row>
  27.     <div className="demo-title">三列布局，左列右列固定，中间自适应</div>
  28.     <Row className="demo-row">
  29.       <Col fixedSpan="8">
  30.         <div className="demo-col-inset">col-fixed-8</div>
  31.       </Col>
  32.       <Col>
  33.         <div className="demo-col-inset">col</div>
  34.       </Col>
  35.       <Col fixedSpan="8">
  36.         <div className="demo-col-inset">col-fixed-8</div>
  37.       </Col>
  38.     </Row>
  39.   </div>,
  40.   mountNode
  41. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

嵌套布局

Col下也可嵌套Row，以完成更细致的布局，如果想保持不同嵌套的Row下的Col间间距相等，请设置Row的type为across，即通栏模式，或自己设置样式，将Row的左右padding设置为0。

Grid 栅格 - 图8

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <Row className="demo-row">
  8.       <Col span="10">
  9.         <Row type="across">
  10.           <Col span="6">
  11.             <div className="demo-col-inset">col-10-6</div>
  12.           </Col>
  13.           <Col span="18">
  14.             <div className="demo-col-inset">col-10-18</div>
  15.           </Col>
  16.         </Row>
  17.       </Col>
  18.       <Col span="14">
  19.         <Row type="across">
  20.           <Col span="18">
  21.             <div className="demo-col-inset">col-14-18</div>
  22.           </Col>
  23.           <Col span="6">
  24.             <div className="demo-col-inset">col-14-6</div>
  25.           </Col>
  26.         </Row>
  27.       </Col>
  28.     </Row>
  29.   </div>,
  30.   mountNode
  31. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

偏移(固定栅格))

（不支持IE9及以下浏览器）列可以向右偏移一定的列数, 偏移的列数和固定栅格列数定义相同.

Grid 栅格 - 图9

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">常规偏移，可设置offset的值从0到23</div>
  8.     <Row className="demo-row">
  9.       <Col fixedOffset="0">
  10.         <div className="demo-col-inset">offset-fixed-0</div>
  11.       </Col>
  12.     </Row>
  13.     <Row className="demo-row">
  14.       <Col fixedOffset="4">
  15.         <div className="demo-col-inset">offset-fixed-4</div>
  16.       </Col>
  17.     </Row>
  18.     <Row className="demo-row">
  19.       <Col fixedOffset="8">
  20.         <div className="demo-col-inset">offset-fixed-8</div>
  21.       </Col>
  22.     </Row>
  23.     <Row className="demo-row">
  24.       <Col fixedOffset="12">
  25.         <div className="demo-col-inset">offset-fixed-12</div>
  26.       </Col>
  27.     </Row>
  29.     <div className="demo-title">自适应偏移</div>
  30.     <Row className="demo-row">
  31.       <Col>
  32.         <div className="demo-col-inset">col</div>
  33.       </Col>
  34.       <Col fixedOffset="12">
  35.         <div className="demo-col-inset">offset-fixed-12</div>
  36.       </Col>
  37.     </Row>
  38.   </div>,
  39.   mountNode
  40. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

偏移(流式栅格))

（不支持IE9及以下浏览器）列可以向右偏移一定的列数，偏移的列数和流式布局栅格列数定义相同。

Grid 栅格 - 图10

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">常规偏移，可设置offset的值从0到30</div>
  8.     <Row className="demo-row">
  9.       <Col offset="0">
  10.         <div className="demo-col-inset">offset-fixed-0</div>
  11.       </Col>
  12.     </Row>
  13.     <Row className="demo-row">
  14.       <Col offset="4">
  15.         <div className="demo-col-inset">offset-fixed-4</div>
  16.       </Col>
  17.     </Row>
  18.     <Row className="demo-row">
  19.       <Col offset="8">
  20.         <div className="demo-col-inset">offset-fixed-8</div>
  21.       </Col>
  22.     </Row>
  23.     <Row className="demo-row">
  24.       <Col offset="12">
  25.         <div className="demo-col-inset">offset-fixed-12</div>
  26.       </Col>
  27.     </Row>
  29.     <div className="demo-title">自适应偏移</div>
  30.     <Row className="demo-row">
  31.       <Col>
  32.         <div className="demo-col-inset">col</div>
  33.       </Col>
  34.       <Col offset="12">
  35.         <div className="demo-col-inset">offset-12</div>
  36.       </Col>
  37.     </Row>
  38.   </div>,
  39.   mountNode
  40. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

布局方式

Note: 未来的@alife/grid@1.x中的默认布局即是fluid布局，并且去除最大宽度为1500px的限制。across为通拦模式，行边距为0。no-padding行边距以及所有列间距都为0。no-wrap为单行模式, 列在行中宽度溢出后不换行。（IE9及以下版本不支持）wrap为单行模式, 列在行中宽度溢出后换行。（IE9及以下版本不支持）fixed为固定宽度布局，宽度为各断点值，两侧根据分辨率情况自动留白。fluid也为流式布局，行的最大宽度随浏览器宽度变化而变化，直到最大宽度1500px。默认布局为流式布局，行的最大宽度随浏览器宽度变化而变化。

Grid 栅格 - 图11

查看源码在线预览

  1. import { Grid } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. ReactDOM.render(
  6.   <div className="demo">
  7.     <div className="demo-title">默认布局</div>
  8.     <Row className="demo-row">
  9.       <Col span="8">
  10.         <div className="demo-col-inset" />
  11.       </Col>
  12.       <Col span="8">
  13.         <div className="demo-col-inset" />
  14.       </Col>
  15.       <Col span="8">
  16.         <div className="demo-col-inset" />
  17.       </Col>
  18.     </Row>
  20.     <div className="demo-title">流式布局(fluid)</div>
  21.     <Row type="fluid" className="demo-row">
  22.       <Col span="8">
  23.         <div className="demo-col-inset" />
  24.       </Col>
  25.       <Col span="8">
  26.         <div className="demo-col-inset" />
  27.       </Col>
  28.       <Col span="8">
  29.         <div className="demo-col-inset" />
  30.       </Col>
  31.     </Row>
  33.     <div className="demo-title">固定宽度布局(fixed)</div>
  34.     <Row type="fixed" className="demo-row">
  35.       <Col span="8">
  36.         <div className="demo-col-inset" />
  37.       </Col>
  38.       <Col span="8">
  39.         <div className="demo-col-inset" />
  40.       </Col>
  41.       <Col span="8">
  42.         <div className="demo-col-inset" />
  43.       </Col>
  44.     </Row>
  46.     <div className="demo-title">固定宽度布局(fixed)，指定固定宽度</div>
  47.     <Row type="fixed" fixedWidth="s" className="demo-row">
  48.       <Col>
  49.         <div className="demo-col-inset">720px</div>
  50.       </Col>
  51.       <Col>
  52.         <div className="demo-col-inset">720px</div>
  53.       </Col>
  54.       <Col>
  55.         <div className="demo-col-inset">720px</div>
  56.       </Col>
  57.     </Row>
  59.     <div className="demo-title">单行模式(wrap)，列在行中宽度溢出后换行</div>
  60.     <Row type="wrap" className="demo-row">
  61.       <Col span="10">
  62.         <div className="demo-col-inset">col-10</div>
  63.       </Col>
  64.       <Col span="10">
  65.         <div className="demo-col-inset">col-10</div>
  66.       </Col>
  67.       <Col span="6">
  68.         <div className="demo-col-inset">col-6</div>
  69.       </Col>
  70.     </Row>
  72.     <div className="demo-title">
  73.       单行模式(no-wrap)，列在行中宽度溢出后不换行
  74.     </div>
  75.     <Row type="no-wrap" className="demo-row">
  76.       <Col span="10">
  77.         <div className="demo-col-inset">col-10</div>
  78.       </Col>
  79.       <Col span="10">
  80.         <div className="demo-col-inset">col-10</div>
  81.       </Col>
  82.       <Col span="6">
  83.         <div className="demo-col-inset">col-6</div>
  84.       </Col>
  85.     </Row>
  87.     <div className="demo-title">无间距布局(no-padding)</div>
  88.     <Row type="no-padding" className="demo-row">
  89.       <Col span="10">
  90.         <div className="demo-col-inset">col-10</div>
  91.       </Col>
  92.       <Col span="8">
  93.         <div className="demo-col-inset">col-8</div>
  94.       </Col>
  95.       <Col span="6">
  96.         <div className="demo-col-inset">col-6</div>
  97.       </Col>
  98.     </Row>
  100.     <div className="demo-title">通栏布局(across)</div>
  101.     <Row type="across" className="demo-row">
  102.       <Col span="10">
  103.         <div className="demo-col-inset">col-10</div>
  104.       </Col>
  105.       <Col span="8">
  106.         <div className="demo-col-inset">col-8</div>
  107.       </Col>
  108.       <Col span="6">
  109.         <div className="demo-col-inset">col-6</div>
  110.       </Col>
  111.     </Row>
  113.     <div className="demo-title">多种布局模式组合使用(fixed, no-padding)</div>
  114.     <Row type={["fixed", "no-padding"]} fixedWidth="s" className="demo-row">
  115.       <Col span="12">
  116.         <div className="demo-col-inset">col-12</div>
  117.       </Col>
  118.       <Col span="6">
  119.         <div className="demo-col-inset">col-6</div>
  120.       </Col>
  121.       <Col span="6">
  122.         <div className="demo-col-inset">col-6</div>
  123.       </Col>
  124.     </Row>
  126.     <div className="demo-title">
  127.       多种布局模式组合使用(fluid, no-wrap, no-padding)
  128.     </div>
  129.     <Row type={["fluid", "no-wrap", "no-padding"]} className="demo-row">
  130.       <Col span="12">
  131.         <div className="demo-col-inset">col-12</div>
  132.       </Col>
  133.       <Col span="8">
  134.         <div className="demo-col-inset">col-8</div>
  135.       </Col>
  136.       <Col span="6">
  137.         <div className="demo-col-inset">col-6</div>
  138.       </Col>
  139.     </Row>
  140.   </div>,
  141.   mountNode
  142. );
  1. .demo {
  2.     padding-top: 10px;
  3.     border: 1px solid #e9e9e9;
  4.     border-radius: 6px;
  5. }
  7. .demo-title {
  8.     margin-left: 20px;
  9. }
  11. .demo-row {
  12.     margin: 10px 0;
  13. }
  15. .demo-col-inset {
  16.     min-height: 30px;
  17.     border:1px solid #CCC;
  18.     border-radius: 3px;
  19.     background-color:#ECECEC;
  20.     line-height: 30px;
  21.     text-align: center;
  22. }

相关区块

Grid 栅格 - 图12

暂无相关区块