{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/grid","result":{"data":{"current":{"frontmatter":{"title":"Grid","order":20,"brief":"24 grid system.","icon":"doc-grid"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#overview","title":"Overview"},{"url":"#flex-layout","title":"Flex layout"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#gutter-interval","title":"Gutter interval"},{"url":"#offset","title":"Offset"},{"url":"#use-flex-layout","title":"Use Flex layout"},{"url":"#flex-subelements-vertically-aligned","title":"Flex subelements vertically aligned"},{"url":"#flex-element-sorting","title":"Flex element sorting"},{"url":"#responsive","title":"Responsive"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#row","title":"Row"},{"url":"#col","title":"Col"}]},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n  \"order\": 20,\n  \"category\": \"Basic\",\n  \"title\": \"Grid\",\n  \"icon\": \"doc-grid\",\n  \"dir\": \"column\",\n  \"brief\": \"24 grid system.\"\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  }, \"Overview\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The grid system of layout, we define the external framework of information blocks based on row and column (col) to ensure that each area of the page can be robustly arranged.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Flex layout\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Our grid system supports the Flex layout, allowing the horizontal alignment of child elements within the parent node - left, center, right, equal width, scattered arrangement. Between child elements and child elements, support top alignment, vertical center alignment, bottom alignment. At the same time, support the use of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"order\"), \" To define the order of the elements.\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), 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  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"From stacking to horizontal arrangement.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Using a single set of Row and Col grid components, you can create a basic grid system. All Col must be placed in the Row.\"), 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 interval\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The grid often needs to work with the interval. You can use Row's \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Gutter\"), \" Properties, we recommend using (16 + 8n) px as a grid interval. (n is a natural number)\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Vertical gutter can be in the form of an array. The first item of the array is horizontal gutter and the second item is vertical gutter.\", mdx(\"br\", null)), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"If you want to support responsiveness, you can write {xs: 8, sm: 16, md: 24, lg: 32}.\", mdx(\"br\", null)), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Vertical gutter in array form supported from version \", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"1.11.0\")), mdx(\"br\", null)), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Dark for content area, light for spacing\"), 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\"), 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  }, \"Use Flex layout\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"row-flex\"), \" to define a Flex layout whose child elements are based on different values \", 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\"), \", define their typesetting methods in the parent node respectively.\"), 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 subelements vertically aligned\"), 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 element sorting\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Change the sorting of elements through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"order\"), \" of the Col.\"), 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  }, \"Responsive\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Referring to Bootstrap's responsive design, preset six response sizes:\", 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\"), \".\"), 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 reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), 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  }, \"Vertical alignment under flex layout: \", 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  }, \"Class name\"), 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  }, \"Grid interval, can be written as pixel value or support responsive object writing \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ xs: 8, sm: 16, md: 24}\"), \", Vertical gutter support from version \", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"1.11.0\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number / object / array\"), 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  }, \"Horizontal arrangement under flex layout: \", 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  }, \"style\"), 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  }, \"Layout mode, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \", valid under \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"http://caniuse.com/#search=flex\"\n  }, \"Modern Browser\")), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"))), 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  }, \"\\u2265 992px\"), \" responsive grid, which can be a number of grids or an object containing other properties\"), 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  }, \"\\u2265 768px\"), \" responsive grid, which can be a number of grids or an object containing other properties\"), 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  }, \"The number of interval cells on the left side of a grid. There can be no grid in the interval.\"), 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  }, \"Grid order, effective in \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"flex\"), \" layout mode\"), 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  }, \"The grid moves to the left.\"), 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  }, \"The grid moves to the right.\"), 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  }, \"\\u2265 576px\"), \" responsive grid, which can be a number of grids or an object containing other properties\"), 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  }, \"The number of grid spaces is equivalent to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"display: none\"), \" when it is 0\"), 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  }, \"\\u2265 1200px\"), \" responsive grid, which can be a number of grids or an object containing other properties\"), 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\"), \" responsive grid, which can be a number of grids or an object containing other attributes\"), 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  }, \"\\u2265 1600px\"), \" responsive grid, which can be a number of grids or an object containing other properties\"), 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  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/basic/grid","next":{"fields":{"slug":"zh-CN/basic/grid"},"id":"cc95161c-39b7-509f-abeb-3708b88abfb8","frontmatter":{"title":"Grid 栅格","localeCode":"zh-CN","icon":"doc-grid","showNew":null}},"previous":{"fields":{"slug":"zh-CN/basic/layout"},"id":"0000c1d2-38f7-5831-91aa-1c987475c7f1","frontmatter":{"title":"Layout 布局","localeCode":"zh-CN","icon":"doc-layout","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}