{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/basic/grid","result":{"data":{"current":{"frontmatter":{"title":"Grid 栅格","order":20,"brief":"24 栅格系统。","icon":"doc-grid"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#概述","title":"概述"},{"url":"#弹性布局","title":"弹性布局"},{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基础使用","title":"基础使用"},{"url":"#gutter-间隔","title":"Gutter 间隔"},{"url":"#offset-偏移","title":"Offset 偏移"},{"url":"#flex-布局","title":"Flex 布局"},{"url":"#flex-子元素垂直对齐","title":"Flex 子元素垂直对齐"},{"url":"#flex-元素排序","title":"Flex 元素排序"},{"url":"#响应式","title":"响应式"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#row","title":"Row"},{"url":"#col","title":"Col"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 20,\n  \"category\": \"基础\",\n  \"title\": \"Grid 栅格\",\n  \"icon\": \"doc-grid\",\n  \"dir\": \"column\",\n  \"brief\": \"24 栅格系统。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6982\\u8FF0\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5E03\\u5C40\\u7684\\u6805\\u683C\\u5316\\u7CFB\\u7EDF\\uFF0C\\u6211\\u4EEC\\u662F\\u57FA\\u4E8E\\u884C\\uFF08row\\uFF09\\u548C\\u5217\\uFF08col\\uFF09\\u6765\\u5B9A\\u4E49\\u4FE1\\u606F\\u533A\\u5757\\u7684\\u5916\\u90E8\\u6846\\u67B6\\uFF0C\\u4EE5\\u4FDD\\u8BC1\\u9875\\u9762\\u7684\\u6BCF\\u4E2A\\u533A\\u57DF\\u80FD\\u591F\\u7A33\\u5065\\u5730\\u6392\\u5E03\\u8D77\\u6765\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u5F39\\u6027\\u5E03\\u5C40\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6211\\u4EEC\\u7684\\u6805\\u683C\\u5316\\u7CFB\\u7EDF\\u652F\\u6301 Flex \\u5E03\\u5C40\\uFF0C\\u5141\\u8BB8\\u5B50\\u5143\\u7D20\\u5728\\u7236\\u8282\\u70B9\\u5185\\u7684\\u6C34\\u5E73\\u5BF9\\u9F50\\u65B9\\u5F0F - \\u5C45\\u5DE6\\u3001\\u5C45\\u4E2D\\u3001\\u5C45\\u53F3\\u3001\\u7B49\\u5BBD\\u6392\\u5217\\u3001\\u5206\\u6563\\u6392\\u5217\\u3002\\u5B50\\u5143\\u7D20\\u4E0E\\u5B50\\u5143\\u7D20\\u4E4B\\u95F4\\uFF0C\\u652F\\u6301\\u9876\\u90E8\\u5BF9\\u9F50\\u3001\\u5782\\u76F4\\u5C45\\u4E2D\\u5BF9\\u9F50\\u3001\\u5E95\\u90E8\\u5BF9\\u9F50\\u7684\\u65B9\\u5F0F\\u3002\\u540C\\u65F6\\uFF0C\\u652F\\u6301\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"order\"), \" \\u6765\\u5B9A\\u4E49\\u5143\\u7D20\\u7684\\u6392\\u5217\\u987A\\u5E8F\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Col, Row } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4ECE\\u5806\\u53E0\\u5230\\u6C34\\u5E73\\u6392\\u5217\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528\\u5355\\u4E00\\u7684\\u4E00\\u7EC4 Row \\u548C Col \\u6805\\u683C\\u7EC4\\u4EF6\\uFF0C\\u5C31\\u53EF\\u4EE5\\u521B\\u5EFA\\u4E00\\u4E2A\\u57FA\\u672C\\u7684\\u6805\\u683C\\u7CFB\\u7EDF\\uFF0C\\u6240\\u6709 Col \\u5FC5\\u987B\\u653E\\u5728 Row \\u5185\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid\\\">\\n        <Row>\\n            <Col span={24}><div className=\\\"col-content\\\">col-24</div></Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col span={12}><div className=\\\"col-content\\\">col-12</div></Col>\\n            <Col span={12}><div className=\\\"col-content\\\">col-12</div></Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col span={8}><div className=\\\"col-content\\\">col-8</div></Col>\\n            <Col span={8}><div className=\\\"col-content\\\">col-8</div></Col>\\n            <Col span={8}><div className=\\\"col-content\\\">col-8</div></Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col span={6}><div className=\\\"col-content\\\">col-6</div></Col>\\n            <Col span={6}><div className=\\\"col-content\\\">col-6</div></Col>\\n            <Col span={6}><div className=\\\"col-content\\\">col-6</div></Col>\\n            <Col span={6}><div className=\\\"col-content\\\">col-6</div></Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Gutter \\u95F4\\u9694\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6805\\u683C\\u5E38\\u5E38\\u9700\\u8981\\u548C\\u95F4\\u9694\\u8FDB\\u884C\\u914D\\u5408\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 Row \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gutter\"), \" \\u5C5E\\u6027\\uFF0C\\u6211\\u4EEC\\u63A8\\u8350\\u4F7F\\u7528 (16+8n)px \\u4F5C\\u4E3A\\u6805\\u683C\\u95F4\\u9694\\u3002(n \\u662F\\u81EA\\u7136\\u6570)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5782\\u76F4\\u95F4\\u9694\\u53EF\\u4EE5\\u4F7F\\u7528\\u6570\\u7EC4\\u5F62\\u5F0F\\uFF0C\\u6570\\u7EC4\\u7B2C\\u4E00\\u9879\\u4E3A\\u6A2A\\u5411\\u95F4\\u9694\\uFF0C\\u7B2C\\u4E8C\\u9879\\u4E3A\\u5782\\u76F4\\u95F4\\u9694\\u3002  \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u8981\\u652F\\u6301\\u54CD\\u5E94\\u5F0F\\uFF0C\\u53EF\\u4EE5\\u5199\\u6210 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{ xs: 8, sm: 16, md: 24, lg: 32 }\"), \"  \"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4ECE\", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"1.11.0\"), \"\\u7248\\u672C\\u8D77\\u652F\\u6301\\u6570\\u7EC4\\u5F62\\u5F0F\\u7684\\u5782\\u76F4\\u95F4\\u9694\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6DF1\\u8272\\u4E3A\\u5185\\u5BB9\\u7269\\u533A\\u57DF\\uFF0C\\u6D45\\u8272\\u4E3A\\u95F4\\u9694\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid grid-gutter\\\">\\n        <p>horizontal</p>\\n        <hr />\\n        <Row gutter={16}>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n        </Row>\\n        <p>vertical</p>\\n        <hr />\\n        <Row gutter={[16, 24]}>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Offset \\u504F\\u79FB\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid\\\">\\n        <Row>\\n            <Col span={8}><div className=\\\"col-content\\\">col-8</div></Col>\\n            <Col span={8} offset={8}>\\n                <div className=\\\"col-content\\\">col-8</div>\\n            </Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col span={6} offset={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n            <Col span={6} offset={6}>\\n                <div className=\\\"col-content\\\">col-6</div>\\n            </Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col span={12} offset={6}>\\n                <div className=\\\"col-content\\\">col-12</div>\\n            </Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Flex \\u5E03\\u5C40\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"row-flex\"), \" \\u5B9A\\u4E49 Flex \\u5E03\\u5C40\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u503C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"start\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"center\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"end\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"space-between\"), \",\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"space-around\"), \"\\uFF0C\\u5206\\u522B\\u5B9A\\u4E49\\u5176\\u5728\\u7236\\u8282\\u70B9\\u91CC\\u9762\\u7684\\u6392\\u7248\\u65B9\\u5F0F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid\\\">\\n        <p>sub-element align left</p>\\n        <Row type=\\\"flex\\\" justify=\\\"start\\\">\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n        </Row>\\n\\n        <p>sub-element align center</p>\\n        <Row type=\\\"flex\\\" justify=\\\"center\\\">\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n        </Row>\\n\\n        <p>sub-element align right</p>\\n        <Row type=\\\"flex\\\" justify=\\\"end\\\">\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n        </Row>\\n\\n        <p>sub-element monospaced arrangement</p>\\n        <Row type=\\\"flex\\\" justify=\\\"space-between\\\">\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n        </Row>\\n\\n        <p>sub-element align full</p>\\n        <Row type=\\\"flex\\\" justify=\\\"space-around\\\">\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Flex \\u5B50\\u5143\\u7D20\\u5782\\u76F4\\u5BF9\\u9F50\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid grid-flex\\\">\\n        <p>Align Top</p>\\n        <Row type=\\\"flex\\\" justify=\\\"center\\\" align=\\\"top\\\">\\n            <Col span={4}><div className=\\\"col-content\\\" value={100}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={50}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={120}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={80}>col-4</div></Col>\\n        </Row>\\n\\n        <p>Align Center</p>\\n        <Row type=\\\"flex\\\" justify=\\\"space-around\\\" align=\\\"middle\\\">\\n            <Col span={4}><div className=\\\"col-content\\\" value={100}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={50}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={120}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={80}>col-4</div></Col>\\n        </Row>\\n\\n        <p>Align Bottom</p>\\n        <Row type=\\\"flex\\\" justify=\\\"space-between\\\" align=\\\"bottom\\\">\\n            <Col span={4}><div className=\\\"col-content\\\" value={100}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={50}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={120}>col-4</div></Col>\\n            <Col span={4}><div className=\\\"col-content\\\" value={80}>col-4</div></Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Flex \\u5143\\u7D20\\u6392\\u5E8F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 Flex \\u5E03\\u5C40\\u7684 Order \\u6765\\u6539\\u53D8\\u5143\\u7D20\\u7684\\u6392\\u5E8F\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid\\\">\\n        <Row type=\\\"flex\\\">\\n            <Col span={6} order={4}><div className=\\\"col-content\\\">col-4</div></Col>\\n            <Col span={6} order={3}><div className=\\\"col-content\\\">col-3</div></Col>\\n            <Col span={6} order={2}><div className=\\\"col-content\\\">col-2</div></Col>\\n            <Col span={6} order={1}><div className=\\\"col-content\\\">col-1</div></Col>\\n        </Row>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u54CD\\u5E94\\u5F0F\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53C2\\u7167 Bootstrap \\u7684 \\u54CD\\u5E94\\u5F0F\\u8BBE\\u8BA1\\uFF0C\\u9884\\u8BBE\\u516D\\u4E2A\\u54CD\\u5E94\\u5C3A\\u5BF8\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xs\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"sm\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lg\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xl\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"xxl\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Col, Row } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div className=\\\"grid\\\">\\n        <Row gutter={{ xs: 16, sm: 16, md: 16, lg: 24, xl: 24, xxl: 24 }}>\\n            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className=\\\"col-content\\\">Col</div></Col>\\n            <Col xs={20} sm={16} md={12} lg={8} xl={4}><div className=\\\"col-content\\\">Col</div></Col>\\n            <Col xs={2} sm={4} md={6} lg={8} xl={10}><div className=\\\"col-content\\\">Col</div></Col>\\n        </Row>\\n        <br/>\\n        <Row>\\n            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className=\\\"col-content\\\">Col</div></Col>\\n            <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className=\\\"col-content\\\">Col</div></Col>\\n            <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}><div className=\\\"col-content\\\">Col</div></Col>\\n        </Row>\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Row\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex \\u5E03\\u5C40\\u4E0B\\u7684\\u5782\\u76F4\\u5BF9\\u9F50\\u65B9\\u5F0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"top\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"middle\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"gutter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u95F4\\u9694\\uFF0C\\u53EF\\u4EE5\\u5199\\u6210\\u50CF\\u7D20\\u503C\\u6216\\u652F\\u6301\\u54CD\\u5E94\\u5F0F\\u7684\\u5BF9\\u8C61\\u5199\\u6CD5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ xs: 8, sm: 16, md: 24}\"), mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u4ECE1.11.0\\u7248\\u672C\\u8D77\\u652F\\u6301\\u5782\\u76F4\\u95F4\\u9694\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\", \"|\", \"Array<number\", \"|\", \"object>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"justify\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"flex \\u5E03\\u5C40\\u4E0B\\u7684\\u6C34\\u5E73\\u6392\\u5217\\u65B9\\u5F0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"center\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"space-around\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"space-between\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E03\\u5C40\\u6A21\\u5F0F\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \"\\uFF0C\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"http://caniuse.com/#search=flex\"\n  }, \"\\u73B0\\u4EE3\\u6D4F\\u89C8\\u5668\"), \" \\u4E0B\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Col\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lg\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u2265992px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"md\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u2265768px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"offset\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u5DE6\\u4FA7\\u7684\\u95F4\\u9694\\u683C\\u6570\\uFF0C\\u95F4\\u9694\\u5185\\u4E0D\\u53EF\\u4EE5\\u6709\\u6805\\u683C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"order\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u987A\\u5E8F\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \" \\u5E03\\u5C40\\u6A21\\u5F0F\\u4E0B\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pull\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u5411\\u5DE6\\u79FB\\u52A8\\u683C\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"push\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u5411\\u53F3\\u79FB\\u52A8\\u683C\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"sm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u2265575px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"span\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6805\\u683C\\u5360\\u4F4D\\u683C\\u6570\\uFF0C\\u4E3A 0 \\u65F6\\u76F8\\u5F53\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"display: none\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"xl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u22651200px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"xs\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"<576px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"xxl\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"\\u22651600px\"), \" \\u54CD\\u5E94\\u5F0F\\u6805\\u683C\\uFF0C\\u53EF\\u4E3A\\u6805\\u683C\\u6570\\u6216\\u5BF9\\u8C61\\u914D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\", \"|\", \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/basic/grid","next":{"fields":{"slug":"en-US/basic/resizable"},"id":"77123d15-52ca-5701-aa84-a658fbe0e6e3","frontmatter":{"title":"Resizable","localeCode":"en-US","icon":"doc-steps","showNew":null}},"previous":{"fields":{"slug":"en-US/basic/grid"},"id":"7443dedd-19a9-532e-b90a-b07ef6436651","frontmatter":{"title":"Grid","localeCode":"en-US","icon":"doc-grid","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}