import{_ as r,l as i,w as t,j as l,k,f as o,e as a,b as n,d as f,J as G,c as W,K as S,a as C,h,F as w,t as y,q as b}from"./index.3fe853a6.js";const q={};function L(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"From the stack to the horizontal arrangement.",cn:"\u4ECE\u5806\u53E0\u5230\u6C34\u5E73\u6392\u5217\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u4ECE\u5806\u53E0\u5230\u6C34\u5E73\u6392\u5217\u3002</p>
<p>\u4F7F\u7528\u5355\u4E00\u7684\u4E00\u7EC4 <code>Row</code> \u548C <code>Col</code> \u6805\u683C\u7EC4\u4EF6\uFF0C\u5C31\u53EF\u4EE5\u521B\u5EFA\u4E00\u4E2A\u57FA\u672C\u7684\u6805\u683C\u7CFB\u7EDF\uFF0C\u6240\u6709\u5217\uFF08Col\uFF09\u5FC5\u987B\u653E\u5728 <code>Row</code> \u5185\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>From the stack to the horizontal arrangement.</p>
<p>You can create a basic grid system by using a single set of <code>Row</code> and <code>Col</code> grid assembly, all of the columns (Col) must be placed in <code>Row</code>.</p>
`,order:0,title:{"zh-CN":"\u57FA\u7840\u6805\u683C","en-US":"Basic Grid"},relativePath:"components/grid/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iMTIiPmNvbC0xMjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjEyIj5jb2wtMTI8L2EtY29sPgogIDwvYS1yb3c+CiAgPGEtcm93PgogICAgPGEtY29sIDpzcGFuPSI4Ij5jb2wtODwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjgiPmNvbC04PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iOCI+Y29sLTg8L2EtY29sPgogIDwvYS1yb3c+CiAgPGEtcm93PgogICAgPGEtY29sIDpzcGFuPSI2Ij5jb2wtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiPmNvbC02PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiI+Y29sLTY8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI2Ij5jb2wtNjwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iMTIiPmNvbC0xMjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjEyIj5jb2wtMTI8L2EtY29sPgogIDwvYS1yb3c+CiAgPGEtcm93PgogICAgPGEtY29sIDpzcGFuPSI4Ij5jb2wtODwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjgiPmNvbC04PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iOCI+Y29sLTg8L2EtY29sPgogIDwvYS1yb3c+CiAgPGEtcm93PgogICAgPGEtY29sIDpzcGFuPSI2Ij5jb2wtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiPmNvbC02PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiI+Y29sLTY8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI2Ij5jb2wtNjwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4="}},{default:t(()=>[o(c,null,{default:t(()=>[o(e,{span:12},{default:t(()=>s[0]||(s[0]=[a("col-12")])),_:1,__:[0]}),o(e,{span:12},{default:t(()=>s[1]||(s[1]=[a("col-12")])),_:1,__:[1]})]),_:1}),o(c,null,{default:t(()=>[o(e,{span:8},{default:t(()=>s[2]||(s[2]=[a("col-8")])),_:1,__:[2]}),o(e,{span:8},{default:t(()=>s[3]||(s[3]=[a("col-8")])),_:1,__:[3]}),o(e,{span:8},{default:t(()=>s[4]||(s[4]=[a("col-8")])),_:1,__:[4]})]),_:1}),o(c,null,{default:t(()=>[o(e,{span:6},{default:t(()=>s[5]||(s[5]=[a("col-6")])),_:1,__:[5]}),o(e,{span:6},{default:t(()=>s[6]||(s[6]=[a("col-6")])),_:1,__:[6]}),o(e,{span:6},{default:t(()=>s[7]||(s[7]=[a("col-6")])),_:1,__:[7]}),o(e,{span:6},{default:t(()=>s[8]||(s[8]=[a("col-6")])),_:1,__:[8]})]),_:1})]),htmlCode:t(()=>s[9]||(s[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[10]||(s[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const X=r(q,[["render",L]]),B={};function V(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"Child elements vertically aligned.",cn:"\u5B50\u5143\u7D20\u5782\u76F4\u5BF9\u9F50\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5B50\u5143\u7D20\u5782\u76F4\u5BF9\u9F50\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Child elements vertically aligned.</p>
`,order:5,title:{"zh-CN":"\u5BF9\u9F50","en-US":"Alignment"},relativePath:"components/grid/demo/flex-align.vue",sourceCode:"PHRlbXBsYXRlPgogIDxwPkFsaWduIFRvcDwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0iY2VudGVyIiBhbGlnbj0idG9wIj4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtMTAwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTUwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEyMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC04MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogIDwvYS1yb3c+CgogIDxwPkFsaWduIENlbnRlcjwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0ic3BhY2UtYXJvdW5kIiBhbGlnbj0ibWlkZGxlIj4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtMTAwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTUwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEyMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC04MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogIDwvYS1yb3c+CgogIDxwPkFsaWduIEJvdHRvbTwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0ic3BhY2UtYmV0d2VlbiIgYWxpZ249ImJvdHRvbSI+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEwMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC01MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC0xMjAiPmNvbC00PC9wPgogICAgPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtODAiPmNvbC00PC9wPgogICAgPC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxwPkFsaWduIFRvcDwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0iY2VudGVyIiBhbGlnbj0idG9wIj4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtMTAwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTUwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEyMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC04MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogIDwvYS1yb3c+CgogIDxwPkFsaWduIENlbnRlcjwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0ic3BhY2UtYXJvdW5kIiBhbGlnbj0ibWlkZGxlIj4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtMTAwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTUwIj5jb2wtNDwvcD4KICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEyMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC04MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogIDwvYS1yb3c+CgogIDxwPkFsaWduIEJvdHRvbTwvcD4KICA8YS1yb3cgdHlwZT0iZmxleCIganVzdGlmeT0ic3BhY2UtYmV0d2VlbiIgYWxpZ249ImJvdHRvbSI+CiAgICA8YS1jb2wgOnNwYW49IjQiPgogICAgICA8cCBjbGFzcz0iaGVpZ2h0LTEwMCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC01MCI+Y29sLTQ8L3A+CiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI0Ij4KICAgICAgPHAgY2xhc3M9ImhlaWdodC0xMjAiPmNvbC00PC9wPgogICAgPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNCI+CiAgICAgIDxwIGNsYXNzPSJoZWlnaHQtODAiPmNvbC00PC9wPgogICAgPC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPg=="}},{default:t(()=>[s[12]||(s[12]=n("p",null,"Align Top",-1)),o(c,{type:"flex",justify:"center",align:"top"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[0]||(s[0]=[n("p",{class:"height-100"},"col-4",-1)])),_:1,__:[0]}),o(e,{span:4},{default:t(()=>s[1]||(s[1]=[n("p",{class:"height-50"},"col-4",-1)])),_:1,__:[1]}),o(e,{span:4},{default:t(()=>s[2]||(s[2]=[n("p",{class:"height-120"},"col-4",-1)])),_:1,__:[2]}),o(e,{span:4},{default:t(()=>s[3]||(s[3]=[n("p",{class:"height-80"},"col-4",-1)])),_:1,__:[3]})]),_:1}),s[13]||(s[13]=n("p",null,"Align Center",-1)),o(c,{type:"flex",justify:"space-around",align:"middle"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[4]||(s[4]=[n("p",{class:"height-100"},"col-4",-1)])),_:1,__:[4]}),o(e,{span:4},{default:t(()=>s[5]||(s[5]=[n("p",{class:"height-50"},"col-4",-1)])),_:1,__:[5]}),o(e,{span:4},{default:t(()=>s[6]||(s[6]=[n("p",{class:"height-120"},"col-4",-1)])),_:1,__:[6]}),o(e,{span:4},{default:t(()=>s[7]||(s[7]=[n("p",{class:"height-80"},"col-4",-1)])),_:1,__:[7]})]),_:1}),s[14]||(s[14]=n("p",null,"Align Bottom",-1)),o(c,{type:"flex",justify:"space-between",align:"bottom"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[8]||(s[8]=[n("p",{class:"height-100"},"col-4",-1)])),_:1,__:[8]}),o(e,{span:4},{default:t(()=>s[9]||(s[9]=[n("p",{class:"height-50"},"col-4",-1)])),_:1,__:[9]}),o(e,{span:4},{default:t(()=>s[10]||(s[10]=[n("p",{class:"height-120"},"col-4",-1)])),_:1,__:[10]}),o(e,{span:4},{default:t(()=>s[11]||(s[11]=[n("p",{class:"height-80"},"col-4",-1)])),_:1,__:[11]})]),_:1})]),htmlCode:t(()=>s[15]||(s[15]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("center"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-around"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("middle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-between"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[16]||(s[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Top"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("center"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("top"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-around"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("middle"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("Align Bottom"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-between"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"align"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("bottom"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-100"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-50"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-120"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("height-80"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const z=r(B,[["render",V]]),R={};function K(p,s){const e=l("a-divider"),c=l("a-col"),u=l("a-row"),I=l("demo-box");return k(),i(I,{jsfiddle:{us:"To change the element sort by `order`.",cn:"\u901A\u8FC7 `order` \u6765\u6539\u53D8\u5143\u7D20\u7684\u6392\u5E8F\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u901A\u8FC7 <code>order</code> \u6765\u6539\u53D8\u5143\u7D20\u7684\u6392\u5E8F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>To change the element sort by <code>order</code>.</p>
`,order:6,title:{"zh-CN":"\u6392\u5E8F","en-US":"Order"},relativePath:"components/grid/demo/flex-order.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPk5vcm1hbDwvYS1kaXZpZGVyPgogIDxhLXJvdyB0eXBlPSJmbGV4Ij4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSI0Ij4xIGNvbC1vcmRlci00PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIzIj4yIGNvbC1vcmRlci0zPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIyIj4zIGNvbC1vcmRlci0yPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIxIj40IGNvbC1vcmRlci0xPC9hLWNvbD4KICA8L2Etcm93PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlJlc3BvbnNpdmU8L2EtZGl2aWRlcj4KICA8YS1yb3cgdHlwZT0iZmxleCI+CiAgICA8YS1jb2wgOnNwYW49IjYiIDp4cz0ieyBvcmRlcjogMSB9IiA6c209Insgb3JkZXI6IDIgfSIgOm1kPSJ7IG9yZGVyOiAzIH0iIDpsZz0ieyBvcmRlcjogNCB9Ij4KICAgICAgMSBjb2wtb3JkZXItcmVzcG9uc2l2ZQogICAgPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOnhzPSJ7IG9yZGVyOiAyIH0iIDpzbT0ieyBvcmRlcjogMSB9IiA6bWQ9Insgb3JkZXI6IDQgfSIgOmxnPSJ7IG9yZGVyOiAzIH0iPgogICAgICAyIGNvbC1vcmRlci1yZXNwb25zaXZlCiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI2IiA6eHM9Insgb3JkZXI6IDMgfSIgOnNtPSJ7IG9yZGVyOiA0IH0iIDptZD0ieyBvcmRlcjogMiB9IiA6bGc9Insgb3JkZXI6IDIgfSI+CiAgICAgIDMgY29sLW9yZGVyLXJlc3BvbnNpdmUKICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDp4cz0ieyBvcmRlcjogNCB9IiA6c209Insgb3JkZXI6IDMgfSIgOm1kPSJ7IG9yZGVyOiAxIH0iIDpsZz0ieyBvcmRlcjogMSB9Ij4KICAgICAgNCBjb2wtb3JkZXItcmVzcG9uc2l2ZQogICAgPC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPk5vcm1hbDwvYS1kaXZpZGVyPgogIDxhLXJvdyB0eXBlPSJmbGV4Ij4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSI0Ij4xIGNvbC1vcmRlci00PC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIzIj4yIGNvbC1vcmRlci0zPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIyIj4zIGNvbC1vcmRlci0yPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOm9yZGVyPSIxIj40IGNvbC1vcmRlci0xPC9hLWNvbD4KICA8L2Etcm93PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlJlc3BvbnNpdmU8L2EtZGl2aWRlcj4KICA8YS1yb3cgdHlwZT0iZmxleCI+CiAgICA8YS1jb2wgOnNwYW49IjYiIDp4cz0ieyBvcmRlcjogMSB9IiA6c209Insgb3JkZXI6IDIgfSIgOm1kPSJ7IG9yZGVyOiAzIH0iIDpsZz0ieyBvcmRlcjogNCB9Ij4KICAgICAgMSBjb2wtb3JkZXItcmVzcG9uc2l2ZQogICAgPC9hLWNvbD4KICAgIDxhLWNvbCA6c3Bhbj0iNiIgOnhzPSJ7IG9yZGVyOiAyIH0iIDpzbT0ieyBvcmRlcjogMSB9IiA6bWQ9Insgb3JkZXI6IDQgfSIgOmxnPSJ7IG9yZGVyOiAzIH0iPgogICAgICAyIGNvbC1vcmRlci1yZXNwb25zaXZlCiAgICA8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI2IiA6eHM9Insgb3JkZXI6IDMgfSIgOnNtPSJ7IG9yZGVyOiA0IH0iIDptZD0ieyBvcmRlcjogMiB9IiA6bGc9Insgb3JkZXI6IDIgfSI+CiAgICAgIDMgY29sLW9yZGVyLXJlc3BvbnNpdmUKICAgIDwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDp4cz0ieyBvcmRlcjogNCB9IiA6c209Insgb3JkZXI6IDMgfSIgOm1kPSJ7IG9yZGVyOiAxIH0iIDpsZz0ieyBvcmRlcjogMSB9Ij4KICAgICAgNCBjb2wtb3JkZXItcmVzcG9uc2l2ZQogICAgPC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPg=="}},{default:t(()=>[o(e,{orientation:"left"},{default:t(()=>s[0]||(s[0]=[a("Normal")])),_:1,__:[0]}),o(u,{type:"flex"},{default:t(()=>[o(c,{span:6,order:4},{default:t(()=>s[1]||(s[1]=[a("1 col-order-4")])),_:1,__:[1]}),o(c,{span:6,order:3},{default:t(()=>s[2]||(s[2]=[a("2 col-order-3")])),_:1,__:[2]}),o(c,{span:6,order:2},{default:t(()=>s[3]||(s[3]=[a("3 col-order-2")])),_:1,__:[3]}),o(c,{span:6,order:1},{default:t(()=>s[4]||(s[4]=[a("4 col-order-1")])),_:1,__:[4]})]),_:1}),o(e,{orientation:"left"},{default:t(()=>s[5]||(s[5]=[a("Responsive")])),_:1,__:[5]}),o(u,{type:"flex"},{default:t(()=>[o(c,{span:6,xs:{order:1},sm:{order:2},md:{order:3},lg:{order:4}},{default:t(()=>s[6]||(s[6]=[a(" 1 col-order-responsive ")])),_:1,__:[6]}),o(c,{span:6,xs:{order:2},sm:{order:1},md:{order:4},lg:{order:3}},{default:t(()=>s[7]||(s[7]=[a(" 2 col-order-responsive ")])),_:1,__:[7]}),o(c,{span:6,xs:{order:3},sm:{order:4},md:{order:2},lg:{order:2}},{default:t(()=>s[8]||(s[8]=[a(" 3 col-order-responsive ")])),_:1,__:[8]}),o(c,{span:6,xs:{order:4},sm:{order:3},md:{order:1},lg:{order:1}},{default:t(()=>s[9]||(s[9]=[a(" 4 col-order-responsive ")])),_:1,__:[9]})]),_:1})]),htmlCode:t(()=>s[10]||(s[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Normal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("1 col-order-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("2 col-order-3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("3 col-order-2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("4 col-order-1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Responsive"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      1 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      2 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      3 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      4 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[11]||(s[11]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Normal"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("1 col-order-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("2 col-order-3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("3 col-order-2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":order"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("4 col-order-1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Responsive"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      1 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      2 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      3 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 4 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 3 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ order: 1 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      4 col-order-responsive
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const H=r(R,[["render",K]]),_={};function J(p,s){const e=l("a-divider"),c=l("a-col"),u=l("a-row"),I=l("demo-box");return k(),i(I,{jsfiddle:{us:"Col provides `flex` prop to support fill rest.",cn:"Col \u63D0\u4F9B `flex` \u5C5E\u6027\u4EE5\u652F\u6301\u586B\u5145\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Col \u63D0\u4F9B <code>flex</code> \u5C5E\u6027\u4EE5\u652F\u6301\u586B\u5145\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Col provides <code>flex</code> prop to support fill rest.</p>
`,order:7,title:{"zh-CN":"Flex \u586B\u5145","en-US":"Flex Stretch"},relativePath:"components/grid/demo/flex-stretch.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlBlcmNlbnRhZ2UgY29sdW1uczwvYS1kaXZpZGVyPgogIDxhLXJvdyB0eXBlPSJmbGV4Ij4KICAgIDxhLWNvbCA6ZmxleD0iMiI+MiAvIDU8L2EtY29sPgogICAgPGEtY29sIDpmbGV4PSIzIj4zIC8gNTwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1kaXZpZGVyIG9yaWVudGF0aW9uPSJsZWZ0Ij5GaWxsIHJlc3Q8L2EtZGl2aWRlcj4KICA8YS1yb3cgdHlwZT0iZmxleCI+CiAgICA8YS1jb2wgZmxleD0iMTAwcHgiPjEwMHB4PC9hLWNvbD4KICAgIDxhLWNvbCBmbGV4PSJhdXRvIj5hdXRvPC9hLWNvbD4KICA8L2Etcm93PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlJhdyBmbGV4IHN0eWxlPC9hLWRpdmlkZXI+CiAgPGEtcm93IHR5cGU9ImZsZXgiPgogICAgPGEtY29sIGZsZXg9IjEgMSAyMDBweCI+MSAxIDIwMHB4PC9hLWNvbD4KICAgIDxhLWNvbCBmbGV4PSIwIDEgMzAwcHgiPjAgMSAzMDBweDwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlBlcmNlbnRhZ2UgY29sdW1uczwvYS1kaXZpZGVyPgogIDxhLXJvdyB0eXBlPSJmbGV4Ij4KICAgIDxhLWNvbCA6ZmxleD0iMiI+MiAvIDU8L2EtY29sPgogICAgPGEtY29sIDpmbGV4PSIzIj4zIC8gNTwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1kaXZpZGVyIG9yaWVudGF0aW9uPSJsZWZ0Ij5GaWxsIHJlc3Q8L2EtZGl2aWRlcj4KICA8YS1yb3cgdHlwZT0iZmxleCI+CiAgICA8YS1jb2wgZmxleD0iMTAwcHgiPjEwMHB4PC9hLWNvbD4KICAgIDxhLWNvbCBmbGV4PSJhdXRvIj5hdXRvPC9hLWNvbD4KICA8L2Etcm93PgogIDxhLWRpdmlkZXIgb3JpZW50YXRpb249ImxlZnQiPlJhdyBmbGV4IHN0eWxlPC9hLWRpdmlkZXI+CiAgPGEtcm93IHR5cGU9ImZsZXgiPgogICAgPGEtY29sIGZsZXg9IjEgMSAyMDBweCI+MSAxIDIwMHB4PC9hLWNvbD4KICAgIDxhLWNvbCBmbGV4PSIwIDEgMzAwcHgiPjAgMSAzMDBweDwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4="}},{default:t(()=>[o(e,{orientation:"left"},{default:t(()=>s[0]||(s[0]=[a("Percentage columns")])),_:1,__:[0]}),o(u,{type:"flex"},{default:t(()=>[o(c,{flex:2},{default:t(()=>s[1]||(s[1]=[a("2 / 5")])),_:1,__:[1]}),o(c,{flex:3},{default:t(()=>s[2]||(s[2]=[a("3 / 5")])),_:1,__:[2]})]),_:1}),o(e,{orientation:"left"},{default:t(()=>s[3]||(s[3]=[a("Fill rest")])),_:1,__:[3]}),o(u,{type:"flex"},{default:t(()=>[o(c,{flex:"100px"},{default:t(()=>s[4]||(s[4]=[a("100px")])),_:1,__:[4]}),o(c,{flex:"auto"},{default:t(()=>s[5]||(s[5]=[a("auto")])),_:1,__:[5]})]),_:1}),o(e,{orientation:"left"},{default:t(()=>s[6]||(s[6]=[a("Raw flex style")])),_:1,__:[6]}),o(u,{type:"flex"},{default:t(()=>[o(c,{flex:"1 1 200px"},{default:t(()=>s[7]||(s[7]=[a("1 1 200px")])),_:1,__:[7]}),o(c,{flex:"0 1 300px"},{default:t(()=>s[8]||(s[8]=[a("0 1 300px")])),_:1,__:[8]})]),_:1})]),htmlCode:t(()=>s[9]||(s[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Percentage columns"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("2 / 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("3 / 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Fill rest"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("100px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("auto"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("auto"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Raw flex style"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1 1 200px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("1 1 200px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0 1 300px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("0 1 300px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[10]||(s[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Percentage columns"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("2 / 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("3 / 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Fill rest"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("100px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("auto"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("auto"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-divider")]),a(),n("span",{class:"token attr-name"},"orientation"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("left"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Raw flex style"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-divider")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("1 1 200px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("1 1 200px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"flex"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0 1 300px"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("0 1 300px"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const O=r(_,[["render",J]]);const E={},F={id:"components-grid-demo-flex"};function M(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.",cn:"\u5E03\u5C40\u57FA\u7840\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5E03\u5C40\u57FA\u7840\u3002</p>
<p>\u5B50\u5143\u7D20\u6839\u636E\u4E0D\u540C\u7684\u503C <code>start</code>,<code>center</code>,<code>end</code>,<code>space-between</code>,<code>space-around</code>\uFF0C\u5206\u522B\u5B9A\u4E49\u5176\u5728\u7236\u8282\u70B9\u91CC\u9762\u7684\u6392\u7248\u65B9\u5F0F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Child elements depending on the value of the <code>start</code>,<code>center</code>, <code>end</code>,<code>space-between</code>, <code>space-around</code>, which are defined in its parent node typesetting mode.</p>
`,order:4,title:{"zh-CN":"\u6392\u7248","en-US":"Typesetting"},relativePath:"components/grid/demo/flex.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtZ3JpZC1kZW1vLWZsZXgiPgogICAgPHA+c3ViLWVsZW1lbnQgYWxpZ24gbGVmdDwvcD4KICAgIDxhLXJvdyBqdXN0aWZ5PSJzdGFydCI+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgPC9hLXJvdz4KCiAgICA8cD5zdWItZWxlbWVudCBhbGlnbiBjZW50ZXI8L3A+CiAgICA8YS1yb3cganVzdGlmeT0iY2VudGVyIj4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICA8L2Etcm93PgoKICAgIDxwPnN1Yi1lbGVtZW50IGFsaWduIHJpZ2h0PC9wPgogICAgPGEtcm93IGp1c3RpZnk9ImVuZCI+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgPC9hLXJvdz4KCiAgICA8cD5zdWItZWxlbWVudCBtb25vc3BhY2VkIGFycmFuZ2VtZW50PC9wPgogICAgPGEtcm93IGp1c3RpZnk9InNwYWNlLWJldHdlZW4iPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgIDwvYS1yb3c+CgogICAgPHA+c3ViLWVsZW1lbnQgYWxpZ24gZnVsbDwvcD4KICAgIDxhLXJvdyBqdXN0aWZ5PSJzcGFjZS1hcm91bmQiPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgPC9kaXY+CjwvdGVtcGxhdGU+Cgo8c3R5bGUgbGFuZz0ibGVzcyIgc2NvcGVkPgojY29tcG9uZW50cy1ncmlkLWRlbW8tZmxleCA6ZGVlcCguYW50LXJvdykgewogIGJhY2tncm91bmQ6IHJnYmEoMTI4LCAxMjgsIDEyOCwgMC4wOCk7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtZ3JpZC1kZW1vLWZsZXgiPgogICAgPHA+c3ViLWVsZW1lbnQgYWxpZ24gbGVmdDwvcD4KICAgIDxhLXJvdyBqdXN0aWZ5PSJzdGFydCI+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgPC9hLXJvdz4KCiAgICA8cD5zdWItZWxlbWVudCBhbGlnbiBjZW50ZXI8L3A+CiAgICA8YS1yb3cganVzdGlmeT0iY2VudGVyIj4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICA8L2Etcm93PgoKICAgIDxwPnN1Yi1lbGVtZW50IGFsaWduIHJpZ2h0PC9wPgogICAgPGEtcm93IGp1c3RpZnk9ImVuZCI+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgPC9hLXJvdz4KCiAgICA8cD5zdWItZWxlbWVudCBtb25vc3BhY2VkIGFycmFuZ2VtZW50PC9wPgogICAgPGEtcm93IGp1c3RpZnk9InNwYWNlLWJldHdlZW4iPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgIDwvYS1yb3c+CgogICAgPHA+c3ViLWVsZW1lbnQgYWxpZ24gZnVsbDwvcD4KICAgIDxhLXJvdyBqdXN0aWZ5PSJzcGFjZS1hcm91bmQiPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgICAgPGEtY29sIDpzcGFuPSI0Ij5jb2wtNDwvYS1jb2w+CiAgICAgIDxhLWNvbCA6c3Bhbj0iNCI+Y29sLTQ8L2EtY29sPgogICAgICA8YS1jb2wgOnNwYW49IjQiPmNvbC00PC9hLWNvbD4KICAgIDwvYS1yb3c+CiAgPC9kaXY+CjwvdGVtcGxhdGU+Cgo8c3R5bGUgbGFuZz0ibGVzcyIgc2NvcGVkPgojY29tcG9uZW50cy1ncmlkLWRlbW8tZmxleCA6ZGVlcCguYW50LXJvdykgewogIGJhY2tncm91bmQ6IHJnYmEoMTI4LCAxMjgsIDEyOCwgMC4wOCk7Cn0KPC9zdHlsZT4="}},{default:t(()=>[n("div",F,[s[20]||(s[20]=n("p",null,"sub-element align left",-1)),o(c,{justify:"start"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[0]||(s[0]=[a("col-4")])),_:1,__:[0]}),o(e,{span:4},{default:t(()=>s[1]||(s[1]=[a("col-4")])),_:1,__:[1]}),o(e,{span:4},{default:t(()=>s[2]||(s[2]=[a("col-4")])),_:1,__:[2]}),o(e,{span:4},{default:t(()=>s[3]||(s[3]=[a("col-4")])),_:1,__:[3]})]),_:1}),s[21]||(s[21]=n("p",null,"sub-element align center",-1)),o(c,{justify:"center"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[4]||(s[4]=[a("col-4")])),_:1,__:[4]}),o(e,{span:4},{default:t(()=>s[5]||(s[5]=[a("col-4")])),_:1,__:[5]}),o(e,{span:4},{default:t(()=>s[6]||(s[6]=[a("col-4")])),_:1,__:[6]}),o(e,{span:4},{default:t(()=>s[7]||(s[7]=[a("col-4")])),_:1,__:[7]})]),_:1}),s[22]||(s[22]=n("p",null,"sub-element align right",-1)),o(c,{justify:"end"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[8]||(s[8]=[a("col-4")])),_:1,__:[8]}),o(e,{span:4},{default:t(()=>s[9]||(s[9]=[a("col-4")])),_:1,__:[9]}),o(e,{span:4},{default:t(()=>s[10]||(s[10]=[a("col-4")])),_:1,__:[10]}),o(e,{span:4},{default:t(()=>s[11]||(s[11]=[a("col-4")])),_:1,__:[11]})]),_:1}),s[23]||(s[23]=n("p",null,"sub-element monospaced arrangement",-1)),o(c,{justify:"space-between"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[12]||(s[12]=[a("col-4")])),_:1,__:[12]}),o(e,{span:4},{default:t(()=>s[13]||(s[13]=[a("col-4")])),_:1,__:[13]}),o(e,{span:4},{default:t(()=>s[14]||(s[14]=[a("col-4")])),_:1,__:[14]}),o(e,{span:4},{default:t(()=>s[15]||(s[15]=[a("col-4")])),_:1,__:[15]})]),_:1}),s[24]||(s[24]=n("p",null,"sub-element align full",-1)),o(c,{justify:"space-around"},{default:t(()=>[o(e,{span:4},{default:t(()=>s[16]||(s[16]=[a("col-4")])),_:1,__:[16]}),o(e,{span:4},{default:t(()=>s[17]||(s[17]=[a("col-4")])),_:1,__:[17]}),o(e,{span:4},{default:t(()=>s[18]||(s[18]=[a("col-4")])),_:1,__:[18]}),o(e,{span:4},{default:t(()=>s[19]||(s[19]=[a("col-4")])),_:1,__:[19]})]),_:1})])]),htmlCode:t(()=>s[25]||(s[25]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("components-grid-demo-flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("start"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("center"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("end"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element monospaced arrangement"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-between"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align full"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-around"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`

`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("less"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},"#components-grid-demo-flex :deep(.ant-row)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("128"),n("span",{class:"token punctuation"},","),a(" 128"),n("span",{class:"token punctuation"},","),a(" 128"),n("span",{class:"token punctuation"},","),a(" 0.08"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[26]||(s[26]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("components-grid-demo-flex"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align left"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("start"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align center"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("center"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align right"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("end"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element monospaced arrangement"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-between"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`

    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("p")]),n("span",{class:"token punctuation"},">")]),a("sub-element align full"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("p")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},"justify"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("space-around"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`

`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("less"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},"#components-grid-demo-flex :deep(.ant-row)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(),n("span",{class:"token function"},"rgba"),n("span",{class:"token punctuation"},"("),a("128"),n("span",{class:"token punctuation"},","),a(" 128"),n("span",{class:"token punctuation"},","),a(" 128"),n("span",{class:"token punctuation"},","),a(" 0.08"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const T=r(E,[["render",M],["__scopeId","data-v-b7fe9e44"]]);const Q={},U={class:"gutter-example"};function $(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px` (`n` stands for natural number).",cn:"\u6805\u683C\u5E38\u5E38\u9700\u8981\u548C\u95F4\u9694\u8FDB\u884C\u914D\u5408\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 `Row` \u7684 `gutter` \u5C5E\u6027\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 `(16+8n)px` \u4F5C\u4E3A\u6805\u683C\u95F4\u9694(n \u662F\u81EA\u7136\u6570)\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u6805\u683C\u5E38\u5E38\u9700\u8981\u548C\u95F4\u9694\u8FDB\u884C\u914D\u5408\uFF0C\u4F60\u53EF\u4EE5\u4F7F\u7528 <code>Row</code> \u7684 <code>gutter</code> \u5C5E\u6027\uFF0C\u6211\u4EEC\u63A8\u8350\u4F7F\u7528 <code>(16+8n)px</code> \u4F5C\u4E3A\u6805\u683C\u95F4\u9694(n \u662F\u81EA\u7136\u6570)\u3002</p>
<p>\u5982\u679C\u8981\u652F\u6301\u54CD\u5E94\u5F0F\uFF0C\u53EF\u4EE5\u5199\u6210 <code>{ xs: 8, sm: 16, md: 24, lg: 32 }</code>\u3002</p>
<p>\u5982\u679C\u9700\u8981\u5782\u76F4\u95F4\u8DDD\uFF0C\u53EF\u4EE5\u5199\u6210\u6570\u7EC4\u5F62\u5F0F <code>[\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]</code> <code>[16, { xs: 8, sm: 16, md: 24, lg: 32 }]</code>\u3002</p>
<blockquote>
<p>\u6570\u7EC4\u5F62\u5F0F\u5782\u76F4\u95F4\u8DDD\u5728 <code>1.5.0</code> \u4E4B\u540E\u652F\u6301\u3002</p>
</blockquote>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>You can use the <code>gutter</code> property of <code>Row</code> as grid spacing, we recommend set it to <code>(16 + 8n) px</code> (<code>n</code> stands for natural number).</p>
<p>You can set it to a object like <code>{ xs: 8, sm: 16, md: 24, lg: 32 }</code> for responsive design.</p>
<p>You can use an array to set vertical spacing, <code>[horizontal, vertical]</code> <code>[16, { xs: 8, sm: 16, md: 24, lg: 32 }]</code>.</p>
<blockquote>
<p>vertical gutter was supported after <code>1.5.0</code>.</p>
</blockquote>
`,order:1,title:{"zh-CN":"\u533A\u5757\u95F4\u9694","en-US":"Grid Gutter"},relativePath:"components/grid/demo/gutter.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9Imd1dHRlci1leGFtcGxlIj4KICAgIDxhLXJvdyA6Z3V0dGVyPSIxNiI+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgoKPHN0eWxlIHNjb3BlZD4KLmd1dHRlci1leGFtcGxlIDpkZWVwKC5hbnQtcm93ID4gZGl2KSB7CiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7CiAgYm9yZGVyOiAwOwp9Ci5ndXR0ZXItYm94IHsKICBiYWNrZ3JvdW5kOiAjMDBhMGU5OwogIHBhZGRpbmc6IDVweCAwOwp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgY2xhc3M9Imd1dHRlci1leGFtcGxlIj4KICAgIDxhLXJvdyA6Z3V0dGVyPSIxNiI+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICAgIDxhLWNvbCBjbGFzcz0iZ3V0dGVyLXJvdyIgOnNwYW49IjYiPgogICAgICAgIDxkaXYgY2xhc3M9Imd1dHRlci1ib3giPmNvbC02PC9kaXY+CiAgICAgIDwvYS1jb2w+CiAgICA8L2Etcm93PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgoKPHN0eWxlIHNjb3BlZD4KLmd1dHRlci1leGFtcGxlIDpkZWVwKC5hbnQtcm93ID4gZGl2KSB7CiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7CiAgYm9yZGVyOiAwOwp9Ci5ndXR0ZXItYm94IHsKICBiYWNrZ3JvdW5kOiAjMDBhMGU5OwogIHBhZGRpbmc6IDVweCAwOwp9Cjwvc3R5bGU+"}},{default:t(()=>[n("div",U,[o(c,{gutter:16},{default:t(()=>[o(e,{class:"gutter-row",span:6},{default:t(()=>s[0]||(s[0]=[n("div",{class:"gutter-box"},"col-6",-1)])),_:1,__:[0]}),o(e,{class:"gutter-row",span:6},{default:t(()=>s[1]||(s[1]=[n("div",{class:"gutter-box"},"col-6",-1)])),_:1,__:[1]}),o(e,{class:"gutter-row",span:6},{default:t(()=>s[2]||(s[2]=[n("div",{class:"gutter-box"},"col-6",-1)])),_:1,__:[2]}),o(e,{class:"gutter-row",span:6},{default:t(()=>s[3]||(s[3]=[n("div",{class:"gutter-box"},"col-6",-1)])),_:1,__:[3]})]),_:1})])]),htmlCode:t(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-example"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`

`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".gutter-example :deep(.ant-row > div)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" transparent"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".gutter-box"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #00a0e9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 5px 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[5]||(s[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-example"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-row"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutter-box"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`

`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},".gutter-example :deep(.ant-row > div)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" transparent"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},".gutter-box"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #00a0e9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 5px 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const nn=r(Q,[["render",$],["__scopeId","data-v-b8f99078"]]),an={};function sn(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"`offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.",cn:"\u5217\u504F\u79FB\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5217\u504F\u79FB\u3002</p>
<p>\u4F7F\u7528 <code>offset</code> \u53EF\u4EE5\u5C06\u5217\u5411\u53F3\u4FA7\u504F\u3002\u4F8B\u5982\uFF0C<code>offset={4}</code> \u5C06\u5143\u7D20\u5411\u53F3\u4FA7\u504F\u79FB\u4E86 4 \u4E2A\u5217\uFF08column\uFF09\u7684\u5BBD\u5EA6\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p><code>offset</code> can set the column to the right side. For example, using <code>offset = {4}</code> can set the element shifted to the right four columns width.</p>
`,order:2,title:{"zh-CN":"\u5DE6\u53F3\u504F\u79FB","en-US":"Column offset"},relativePath:"components/grid/demo/offset.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iOCI+Y29sLTg8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI4IiA6b2Zmc2V0PSI4Ij5jb2wtODwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1yb3c+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpvZmZzZXQ9IjYiPmNvbC02IGNvbC1vZmZzZXQtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpvZmZzZXQ9IjYiPmNvbC02IGNvbC1vZmZzZXQtNjwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1yb3c+CiAgICA8YS1jb2wgOnNwYW49IjEyIiA6b2Zmc2V0PSI2Ij5jb2wtMTIgY29sLW9mZnNldC02PC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPgoKCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iOCI+Y29sLTg8L2EtY29sPgogICAgPGEtY29sIDpzcGFuPSI4IiA6b2Zmc2V0PSI4Ij5jb2wtODwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1yb3c+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpvZmZzZXQ9IjYiPmNvbC02IGNvbC1vZmZzZXQtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpvZmZzZXQ9IjYiPmNvbC02IGNvbC1vZmZzZXQtNjwvYS1jb2w+CiAgPC9hLXJvdz4KICA8YS1yb3c+CiAgICA8YS1jb2wgOnNwYW49IjEyIiA6b2Zmc2V0PSI2Ij5jb2wtMTIgY29sLW9mZnNldC02PC9hLWNvbD4KICA8L2Etcm93Pgo8L3RlbXBsYXRlPg=="}},{default:t(()=>[o(c,null,{default:t(()=>[o(e,{span:8},{default:t(()=>s[0]||(s[0]=[a("col-8")])),_:1,__:[0]}),o(e,{span:8,offset:8},{default:t(()=>s[1]||(s[1]=[a("col-8")])),_:1,__:[1]})]),_:1}),o(c,null,{default:t(()=>[o(e,{span:6,offset:6},{default:t(()=>s[2]||(s[2]=[a("col-6 col-offset-6")])),_:1,__:[2]}),o(e,{span:6,offset:6},{default:t(()=>s[3]||(s[3]=[a("col-6 col-offset-6")])),_:1,__:[3]})]),_:1}),o(c,null,{default:t(()=>[o(e,{span:12,offset:6},{default:t(()=>s[4]||(s[4]=[a("col-12 col-offset-6")])),_:1,__:[4]})]),_:1})]),htmlCode:t(()=>s[5]||(s[5]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[6]||(s[6]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":offset"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-12 col-offset-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const tn=r(an,[["render",sn]]),on={};function en(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:'`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` `xxxl` properties to use, where `:xs="6"` is equivalent to `:xs="{ span: 6 }"`.',cn:"`span` `pull` `push` `offset` `order` \u5C5E\u6027\u53EF\u4EE5\u901A\u8FC7\u5185\u5D4C\u5230 `xs` `sm` `md` `lg` `xl` `xxl` \u5C5E\u6027\u4E2D\u6765\u4F7F\u7528\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p><code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> \u5C5E\u6027\u53EF\u4EE5\u901A\u8FC7\u5185\u5D4C\u5230 <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code> \u5C5E\u6027\u4E2D\u6765\u4F7F\u7528\u3002</p>
<p>\u5176\u4E2D <code>:xs=&quot;6&quot;</code> \u76F8\u5F53\u4E8E <code>:xs=&quot;{ span: 6 }&quot;</code>\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p><code>span</code> <code>pull</code> <code>push</code> <code>offset</code> <code>order</code> property can be embedded into <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code> <code>xxxl</code> properties to use, where <code>:xs=&quot;6&quot;</code> is equivalent to <code>:xs=&quot;{ span: 6 }&quot;</code>.</p>
`,order:9,title:{"zh-CN":"\u5176\u4ED6\u5C5E\u6027\u7684\u54CD\u5E94\u5F0F","en-US":"More responsive"},relativePath:"components/grid/demo/responsive-more.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6eHM9Insgc3BhbjogNSwgb2Zmc2V0OiAxIH0iIDpsZz0ieyBzcGFuOiA2LCBvZmZzZXQ6IDIgfSI+Q29sPC9hLWNvbD4KICAgIDxhLWNvbCA6eHM9Insgc3BhbjogMTEsIG9mZnNldDogMSB9IiA6bGc9Insgc3BhbjogNiwgb2Zmc2V0OiAyIH0iPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSJ7IHNwYW46IDUsIG9mZnNldDogMSB9IiA6bGc9Insgc3BhbjogNiwgb2Zmc2V0OiAyIH0iPkNvbDwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4KCgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6eHM9Insgc3BhbjogNSwgb2Zmc2V0OiAxIH0iIDpsZz0ieyBzcGFuOiA2LCBvZmZzZXQ6IDIgfSI+Q29sPC9hLWNvbD4KICAgIDxhLWNvbCA6eHM9Insgc3BhbjogMTEsIG9mZnNldDogMSB9IiA6bGc9Insgc3BhbjogNiwgb2Zmc2V0OiAyIH0iPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSJ7IHNwYW46IDUsIG9mZnNldDogMSB9IiA6bGc9Insgc3BhbjogNiwgb2Zmc2V0OiAyIH0iPkNvbDwvYS1jb2w+CiAgPC9hLXJvdz4KPC90ZW1wbGF0ZT4="}},{default:t(()=>[o(c,null,{default:t(()=>[o(e,{xs:{span:5,offset:1},lg:{span:6,offset:2}},{default:t(()=>s[0]||(s[0]=[a("Col")])),_:1,__:[0]}),o(e,{xs:{span:11,offset:1},lg:{span:6,offset:2}},{default:t(()=>s[1]||(s[1]=[a("Col")])),_:1,__:[1]}),o(e,{xs:{span:5,offset:1},lg:{span:6,offset:2}},{default:t(()=>s[2]||(s[2]=[a("Col")])),_:1,__:[2]})]),_:1})]),htmlCode:t(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 5, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 11, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 5, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 5, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 11, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 5, offset: 1 }"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("{ span: 6, offset: 2 }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const cn=r(on,[["render",en]]),pn={};function ln(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl` `xxl`.",cn:"\u53C2\u7167 Bootstrap \u7684 [\u54CD\u5E94\u5F0F\u8BBE\u8BA1](http://getbootstrap.com/css/#grid-media-queries)\uFF0C\u9884\u8BBE\u4E03\u4E2A\u54CD\u5E94\u5C3A\u5BF8\uFF1A`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u53C2\u7167 Bootstrap \u7684 <a href="http://getbootstrap.com/css/#grid-media-queries" target="_blank" rel="noopener noreferrer">\u54CD\u5E94\u5F0F\u8BBE\u8BA1</a>\uFF0C\u9884\u8BBE\u4E03\u4E2A\u54CD\u5E94\u5C3A\u5BF8\uFF1A<code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code> <code>xxxl</code>\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Referring to the Bootstrap <a href="http://getbootstrap.com/css/#grid-media-queries" target="_blank" rel="noopener noreferrer">responsive design</a>, here preset six dimensions: <code>xs</code> <code>sm</code> <code>md</code> <code>lg</code> <code>xl</code> <code>xxl</code>.</p>
`,order:8,title:{"zh-CN":"\u54CD\u5E94\u5F0F\u5E03\u5C40","en-US":"Responsive"},relativePath:"components/grid/demo/responsive.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6eHM9IjIiIDpzbT0iNCIgOm1kPSI2IiA6bGc9IjgiIDp4bD0iMTAiPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSIyMCIgOnNtPSIxNiIgOm1kPSIxMiIgOmxnPSI4IiA6eGw9IjQiPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSIyIiA6c209IjQiIDptZD0iNiIgOmxnPSI4IiA6eGw9IjEwIj5Db2w8L2EtY29sPgogIDwvYS1yb3c+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6eHM9IjIiIDpzbT0iNCIgOm1kPSI2IiA6bGc9IjgiIDp4bD0iMTAiPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSIyMCIgOnNtPSIxNiIgOm1kPSIxMiIgOmxnPSI4IiA6eGw9IjQiPkNvbDwvYS1jb2w+CiAgICA8YS1jb2wgOnhzPSIyIiA6c209IjQiIDptZD0iNiIgOmxnPSI4IiA6eGw9IjEwIj5Db2w8L2EtY29sPgogIDwvYS1yb3c+CjwvdGVtcGxhdGU+"}},{default:t(()=>[o(c,null,{default:t(()=>[o(e,{xs:2,sm:4,md:6,lg:8,xl:10},{default:t(()=>s[0]||(s[0]=[a("Col")])),_:1,__:[0]}),o(e,{xs:20,sm:16,md:12,lg:8,xl:4},{default:t(()=>s[1]||(s[1]=[a("Col")])),_:1,__:[1]}),o(e,{xs:2,sm:4,md:6,lg:8,xl:10},{default:t(()=>s[2]||(s[2]=[a("Col")])),_:1,__:[2]})]),_:1})]),htmlCode:t(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("20"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[4]||(s[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("20"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("16"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("12"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":xs"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":sm"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("4"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":md"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":lg"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("8"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":xl"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("Col"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const un=r(pn,[["render",ln]]),kn={};function rn(p,s){const e=l("a-col"),c=l("a-row"),u=l("demo-box");return k(),i(u,{jsfiddle:{us:"By using `push` and `pull` class you can easily change column order.",cn:"\u5217\u6392\u5E8F\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5217\u6392\u5E8F\u3002</p>
<p>\u901A\u8FC7\u4F7F\u7528 <code>push</code> \u548C <code>pull</code> \u7C7B\u5C31\u53EF\u4EE5\u5F88\u5BB9\u6613\u7684\u6539\u53D8\u5217\uFF08column\uFF09\u7684\u987A\u5E8F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>By using <code>push</code> and <code>pull</code> class you can easily change column order.</p>
`,order:3,title:{"zh-CN":"\u6805\u683C\u6392\u5E8F","en-US":"Grid sort"},relativePath:"components/grid/demo/sort.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iMTgiIDpwdXNoPSI2Ij5jb2wtMTggY29sLXB1c2gtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpwdWxsPSIxOCI+Y29sLTYgY29sLXB1bGwtMTg8L2EtY29sPgogIDwvYS1yb3c+CjwvdGVtcGxhdGU+CgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLXJvdz4KICAgIDxhLWNvbCA6c3Bhbj0iMTgiIDpwdXNoPSI2Ij5jb2wtMTggY29sLXB1c2gtNjwvYS1jb2w+CiAgICA8YS1jb2wgOnNwYW49IjYiIDpwdWxsPSIxOCI+Y29sLTYgY29sLXB1bGwtMTg8L2EtY29sPgogIDwvYS1yb3c+CjwvdGVtcGxhdGU+"}},{default:t(()=>[o(c,null,{default:t(()=>[o(e,{span:18,push:6},{default:t(()=>s[0]||(s[0]=[a("col-18 col-push-6")])),_:1,__:[0]}),o(e,{span:6,pull:18},{default:t(()=>s[1]||(s[1]=[a("col-6 col-pull-18")])),_:1,__:[1]})]),_:1})]),htmlCode:t(()=>s[2]||(s[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("18"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":push"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-18 col-push-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":pull"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("18"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-pull-18"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[3]||(s[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("18"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":push"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-18 col-push-6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("6"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":pull"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("18"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a("col-6 col-pull-18"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const gn=r(kn,[["render",rn]]),dn=f({setup(){const p=G({gutterKey:1,vgutterKey:1,colCountKey:2,gutters:{},colCounts:{},vgutters:{}});return[8,16,24,32,40,48].forEach((e,c)=>{p.gutters[c]=e}),[8,16,24,32,40,48].forEach((e,c)=>{p.vgutters[c]=e}),[2,3,4,6,8,12].forEach((e,c)=>{p.colCounts[c]=e}),{rowColHtml:W(()=>{const e=p.colCounts[p.colCountKey];let u='<a-row :gutter="['+[p.gutters[p.gutterKey],p.vgutters[p.vgutterKey]]+`]">
`;for(let I=0;I<e;I++){const g=24/e;u+='  <a-col :span="'+g+`"/>
`}return u+="</a-row>",u}),...S(p)}}});const In={id:"components-grid-demo-playground"},mn={style:{"margin-bottom":"16px"}},Cn={style:{width:"50%"}},bn={style:{width:"50%"}},vn={style:{width:"50%"}};function An(p,s,e,c,u,I){const g=l("a-slider"),m=l("a-col"),v=l("a-row"),A=l("demo-box");return k(),i(A,{jsfiddle:{us:"A simple playground for column count and gutter.",cn:"\u53EF\u4EE5\u7B80\u5355\u914D\u7F6E\u51E0\u79CD\u7B49\u5206\u6805\u683C\u548C\u95F4\u8DDD\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u53EF\u4EE5\u7B80\u5355\u914D\u7F6E\u51E0\u79CD\u7B49\u5206\u6805\u683C\u548C\u95F4\u8DDD\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>A simple playground for column count and gutter.</p>
`,order:10,title:{"zh-CN":"\u6805\u683C\u914D\u7F6E\u5668","en-US":"Playground"},relativePath:"components/grid/demo/playfround.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtZ3JpZC1kZW1vLXBsYXlncm91bmQiPgogICAgPGRpdiBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+CiAgICAgIDxzcGFuIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDZweCI+SG9yaXpvbnRhbCBHdXR0ZXIgKHB4KTo8L3NwYW4+CiAgICAgIDxkaXYgc3R5bGU9IndpZHRoOiA1MCUiPgogICAgICAgIDxhLXNsaWRlcgogICAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZ3V0dGVyS2V5IgogICAgICAgICAgOm1pbj0iMCIKICAgICAgICAgIDptYXg9Ik9iamVjdC5rZXlzKGd1dHRlcnMpLmxlbmd0aCAtIDEiCiAgICAgICAgICA6bWFya3M9Imd1dHRlcnMiCiAgICAgICAgICA6c3RlcD0ibnVsbCIKICAgICAgICAvPgogICAgICA8L2Rpdj4KICAgICAgPHNwYW4gc3R5bGU9Im1hcmdpbi1yaWdodDogNnB4Ij5WZXJ0aWNhbCBHdXR0ZXIgKHB4KTo8L3NwYW4+CiAgICAgIDxkaXYgc3R5bGU9IndpZHRoOiA1MCUiPgogICAgICAgIDxhLXNsaWRlcgogICAgICAgICAgdi1tb2RlbDp2YWx1ZT0idmd1dHRlcktleSIKICAgICAgICAgIDptaW49IjAiCiAgICAgICAgICA6bWF4PSJPYmplY3Qua2V5cyh2Z3V0dGVycykubGVuZ3RoIC0gMSIKICAgICAgICAgIDptYXJrcz0idmd1dHRlcnMiCiAgICAgICAgICA6c3RlcD0ibnVsbCIKICAgICAgICAvPgogICAgICA8L2Rpdj4KICAgICAgPHNwYW4gc3R5bGU9Im1hcmdpbi1yaWdodDogNnB4Ij5Db2x1bW4gQ291bnQ6PC9zcGFuPgogICAgICA8ZGl2IHN0eWxlPSJ3aWR0aDogNTAlIj4KICAgICAgICA8YS1zbGlkZXIKICAgICAgICAgIHYtbW9kZWw6dmFsdWU9ImNvbENvdW50S2V5IgogICAgICAgICAgOm1pbj0iMCIKICAgICAgICAgIDptYXg9Ik9iamVjdC5rZXlzKGNvbENvdW50cykubGVuZ3RoIC0gMSIKICAgICAgICAgIDptYXJrcz0iY29sQ291bnRzIgogICAgICAgICAgOnN0ZXA9Im51bGwiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICAgIDxhLXJvdyA6Z3V0dGVyPSJbZ3V0dGVyc1tndXR0ZXJLZXldLCB2Z3V0dGVyc1t2Z3V0dGVyS2V5XV0iPgogICAgICA8YS1jb2wKICAgICAgICB2LWZvcj0iaXRlbSBpbiBjb2xDb3VudHNbY29sQ291bnRLZXldIgogICAgICAgIDprZXk9Iml0ZW0udG9TdHJpbmcoKSIKICAgICAgICA6c3Bhbj0iMjQgLyBjb2xDb3VudHNbY29sQ291bnRLZXldIgogICAgICA+CiAgICAgICAgPGRpdj5Db2x1bW48L2Rpdj4KICAgICAgPC9hLWNvbD4KCiAgICAgIDxhLWNvbAogICAgICAgIHYtZm9yPSJpdGVtIGluIGNvbENvdW50c1tjb2xDb3VudEtleV0iCiAgICAgICAgOmtleT0iaXRlbS50b1N0cmluZygpIgogICAgICAgIDpzcGFuPSIyNCAvIGNvbENvdW50c1tjb2xDb3VudEtleV0iCiAgICAgID4KICAgICAgICA8ZGl2PkNvbHVtbjwvZGl2PgogICAgICA8L2EtY29sPgogICAgPC9hLXJvdz4KICAgIDxwcmU+e3sgcm93Q29sSHRtbCB9fTwvcHJlPgogICAgPGJyIC8+CiAgICA8cHJlPnt7IHJvd0NvbEh0bWwgfX08L3ByZT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGNvbXB1dGVkLCBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZTx7CiAgICAgIGd1dHRlcktleTogbnVtYmVyOwogICAgICB2Z3V0dGVyS2V5OiBudW1iZXI7CiAgICAgIGNvbENvdW50S2V5OiBudW1iZXI7CiAgICAgIGd1dHRlcnM6IHsgW2tleTogbnVtYmVyXTogbnVtYmVyIH07CiAgICAgIGNvbENvdW50czogeyBba2V5OiBudW1iZXJdOiBudW1iZXIgfTsKICAgICAgdmd1dHRlcnM6IHsgW2tleTogbnVtYmVyXTogbnVtYmVyIH07CiAgICB9Pih7CiAgICAgIGd1dHRlcktleTogMSwKICAgICAgdmd1dHRlcktleTogMSwKICAgICAgY29sQ291bnRLZXk6IDIsCiAgICAgIGd1dHRlcnM6IHt9LAogICAgICBjb2xDb3VudHM6IHt9LAogICAgICB2Z3V0dGVyczoge30sCiAgICB9KTsKICAgIFs4LCAxNiwgMjQsIDMyLCA0MCwgNDhdLmZvckVhY2goKHZhbHVlOiBudW1iZXIsIGk6IG51bWJlcikgPT4gewogICAgICBzdGF0ZS5ndXR0ZXJzW2ldID0gdmFsdWU7CiAgICB9KTsKICAgIFs4LCAxNiwgMjQsIDMyLCA0MCwgNDhdLmZvckVhY2goKHZhbHVlLCBpKSA9PiB7CiAgICAgIHN0YXRlLnZndXR0ZXJzW2ldID0gdmFsdWU7CiAgICB9KTsKICAgIFsyLCAzLCA0LCA2LCA4LCAxMl0uZm9yRWFjaCgodmFsdWUsIGkpID0+IHsKICAgICAgc3RhdGUuY29sQ291bnRzW2ldID0gdmFsdWU7CiAgICB9KTsKICAgIGNvbnN0IHJvd0NvbEh0bWwgPSBjb21wdXRlZCgoKSA9PiB7CiAgICAgIGNvbnN0IGNvbENvdW50ID0gc3RhdGUuY29sQ291bnRzW3N0YXRlLmNvbENvdW50S2V5XTsKICAgICAgY29uc3QgZ2V0dGVyID0gW3N0YXRlLmd1dHRlcnNbc3RhdGUuZ3V0dGVyS2V5XSwgc3RhdGUudmd1dHRlcnNbc3RhdGUudmd1dHRlcktleV1dOwogICAgICBsZXQgY29sQ29kZSA9ICc8YS1yb3cgOmd1dHRlcj0iWycgKyBnZXR0ZXIgKyAnXSI+XG4nOwogICAgICBmb3IgKGxldCBpID0gMDsgaSA8IGNvbENvdW50OyBpKyspIHsKICAgICAgICBjb25zdCBzcGFuTnVtID0gMjQgLyBjb2xDb3VudDsKICAgICAgICBjb2xDb2RlICs9ICcgIDxhLWNvbCA6c3Bhbj0iJyArIHNwYW5OdW0gKyAnIi8+XG4nOwogICAgICB9CiAgICAgIGNvbENvZGUgKz0gJzwvYS1yb3c+JzsKICAgICAgcmV0dXJuIGNvbENvZGU7CiAgICB9KTsKICAgIHJldHVybiB7CiAgICAgIHJvd0NvbEh0bWwsCiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KI2NvbXBvbmVudHMtZ3JpZC1kZW1vLXBsYXlncm91bmQgOmRlZXAoLmFudC1jb2wpIHsKICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDsKICBib3JkZXI6IDA7Cn0KI2NvbXBvbmVudHMtZ3JpZC1kZW1vLXBsYXlncm91bmQgOmRlZXAoLmFudC1jb2wpID4gZGl2IHsKICBiYWNrZ3JvdW5kOiAjMDBhMGU5OwogIGhlaWdodDogMTIwcHg7CiAgbGluZS1oZWlnaHQ6IDEyMHB4OwogIGZvbnQtc2l6ZTogMTNweDsKfQojY29tcG9uZW50cy1ncmlkLWRlbW8tcGxheWdyb3VuZCBwcmUgewogIGJhY2tncm91bmQ6ICNmOWY5Zjk7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIGZvbnQtc2l6ZTogMTNweDsKICBwYWRkaW5nOiA4cHggMTZweDsKfQpbZGF0YS10aGVtZT0nZGFyayddICNjb21wb25lbnRzLWdyaWQtZGVtby1wbGF5Z3JvdW5kIHByZSB7CiAgYmFja2dyb3VuZDogIzJmMmYyZjsKfQo8L3N0eWxlPgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgaWQ9ImNvbXBvbmVudHMtZ3JpZC1kZW1vLXBsYXlncm91bmQiPgogICAgPGRpdiBzdHlsZT0ibWFyZ2luLWJvdHRvbTogMTZweCI+CiAgICAgIDxzcGFuIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDZweCI+SG9yaXpvbnRhbCBHdXR0ZXIgKHB4KTo8L3NwYW4+CiAgICAgIDxkaXYgc3R5bGU9IndpZHRoOiA1MCUiPgogICAgICAgIDxhLXNsaWRlcgogICAgICAgICAgdi1tb2RlbDp2YWx1ZT0iZ3V0dGVyS2V5IgogICAgICAgICAgOm1pbj0iMCIKICAgICAgICAgIDptYXg9Ik9iamVjdC5rZXlzKGd1dHRlcnMpLmxlbmd0aCAtIDEiCiAgICAgICAgICA6bWFya3M9Imd1dHRlcnMiCiAgICAgICAgICA6c3RlcD0ibnVsbCIKICAgICAgICAvPgogICAgICA8L2Rpdj4KICAgICAgPHNwYW4gc3R5bGU9Im1hcmdpbi1yaWdodDogNnB4Ij5WZXJ0aWNhbCBHdXR0ZXIgKHB4KTo8L3NwYW4+CiAgICAgIDxkaXYgc3R5bGU9IndpZHRoOiA1MCUiPgogICAgICAgIDxhLXNsaWRlcgogICAgICAgICAgdi1tb2RlbDp2YWx1ZT0idmd1dHRlcktleSIKICAgICAgICAgIDptaW49IjAiCiAgICAgICAgICA6bWF4PSJPYmplY3Qua2V5cyh2Z3V0dGVycykubGVuZ3RoIC0gMSIKICAgICAgICAgIDptYXJrcz0idmd1dHRlcnMiCiAgICAgICAgICA6c3RlcD0ibnVsbCIKICAgICAgICAvPgogICAgICA8L2Rpdj4KICAgICAgPHNwYW4gc3R5bGU9Im1hcmdpbi1yaWdodDogNnB4Ij5Db2x1bW4gQ291bnQ6PC9zcGFuPgogICAgICA8ZGl2IHN0eWxlPSJ3aWR0aDogNTAlIj4KICAgICAgICA8YS1zbGlkZXIKICAgICAgICAgIHYtbW9kZWw6dmFsdWU9ImNvbENvdW50S2V5IgogICAgICAgICAgOm1pbj0iMCIKICAgICAgICAgIDptYXg9Ik9iamVjdC5rZXlzKGNvbENvdW50cykubGVuZ3RoIC0gMSIKICAgICAgICAgIDptYXJrcz0iY29sQ291bnRzIgogICAgICAgICAgOnN0ZXA9Im51bGwiCiAgICAgICAgLz4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICAgIDxhLXJvdyA6Z3V0dGVyPSJbZ3V0dGVyc1tndXR0ZXJLZXldLCB2Z3V0dGVyc1t2Z3V0dGVyS2V5XV0iPgogICAgICA8YS1jb2wKICAgICAgICB2LWZvcj0iaXRlbSBpbiBjb2xDb3VudHNbY29sQ291bnRLZXldIgogICAgICAgIDprZXk9Iml0ZW0udG9TdHJpbmcoKSIKICAgICAgICA6c3Bhbj0iMjQgLyBjb2xDb3VudHNbY29sQ291bnRLZXldIgogICAgICA+CiAgICAgICAgPGRpdj5Db2x1bW48L2Rpdj4KICAgICAgPC9hLWNvbD4KCiAgICAgIDxhLWNvbAogICAgICAgIHYtZm9yPSJpdGVtIGluIGNvbENvdW50c1tjb2xDb3VudEtleV0iCiAgICAgICAgOmtleT0iaXRlbS50b1N0cmluZygpIgogICAgICAgIDpzcGFuPSIyNCAvIGNvbENvdW50c1tjb2xDb3VudEtleV0iCiAgICAgID4KICAgICAgICA8ZGl2PkNvbHVtbjwvZGl2PgogICAgICA8L2EtY29sPgogICAgPC9hLXJvdz4KICAgIDxwcmU+e3sgcm93Q29sSHRtbCB9fTwvcHJlPgogICAgPGJyIC8+CiAgICA8cHJlPnt7IHJvd0NvbEh0bWwgfX08L3ByZT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgY29tcHV0ZWQsIGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgZ3V0dGVyS2V5OiAxLAogICAgICB2Z3V0dGVyS2V5OiAxLAogICAgICBjb2xDb3VudEtleTogMiwKICAgICAgZ3V0dGVyczoge30sCiAgICAgIGNvbENvdW50czoge30sCiAgICAgIHZndXR0ZXJzOiB7fSwKICAgIH0pOwogICAgWzgsIDE2LCAyNCwgMzIsIDQwLCA0OF0uZm9yRWFjaCgodmFsdWUsIGkpID0+IHsKICAgICAgc3RhdGUuZ3V0dGVyc1tpXSA9IHZhbHVlOwogICAgfSk7CiAgICBbOCwgMTYsIDI0LCAzMiwgNDAsIDQ4XS5mb3JFYWNoKCh2YWx1ZSwgaSkgPT4gewogICAgICBzdGF0ZS52Z3V0dGVyc1tpXSA9IHZhbHVlOwogICAgfSk7CiAgICBbMiwgMywgNCwgNiwgOCwgMTJdLmZvckVhY2goKHZhbHVlLCBpKSA9PiB7CiAgICAgIHN0YXRlLmNvbENvdW50c1tpXSA9IHZhbHVlOwogICAgfSk7CiAgICBjb25zdCByb3dDb2xIdG1sID0gY29tcHV0ZWQoKCkgPT4gewogICAgICBjb25zdCBjb2xDb3VudCA9IHN0YXRlLmNvbENvdW50c1tzdGF0ZS5jb2xDb3VudEtleV07CiAgICAgIGNvbnN0IGdldHRlciA9IFtzdGF0ZS5ndXR0ZXJzW3N0YXRlLmd1dHRlcktleV0sIHN0YXRlLnZndXR0ZXJzW3N0YXRlLnZndXR0ZXJLZXldXTsKICAgICAgbGV0IGNvbENvZGUgPSAnPGEtcm93IDpndXR0ZXI9IlsnICsgZ2V0dGVyICsgJ10iPlxuJzsKICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBjb2xDb3VudDsgaSsrKSB7CiAgICAgICAgY29uc3Qgc3Bhbk51bSA9IDI0IC8gY29sQ291bnQ7CiAgICAgICAgY29sQ29kZSArPSAnICA8YS1jb2wgOnNwYW49IicgKyBzcGFuTnVtICsgJyIvPlxuJzsKICAgICAgfQogICAgICBjb2xDb2RlICs9ICc8L2Etcm93Pic7CiAgICAgIHJldHVybiBjb2xDb2RlOwogICAgfSk7CiAgICByZXR1cm4gewogICAgICByb3dDb2xIdG1sLAogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+CiNjb21wb25lbnRzLWdyaWQtZGVtby1wbGF5Z3JvdW5kIDpkZWVwKC5hbnQtY29sKSB7CiAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7CiAgYm9yZGVyOiAwOwp9CiNjb21wb25lbnRzLWdyaWQtZGVtby1wbGF5Z3JvdW5kIDpkZWVwKC5hbnQtY29sKSA+IGRpdiB7CiAgYmFja2dyb3VuZDogIzAwYTBlOTsKICBoZWlnaHQ6IDEyMHB4OwogIGxpbmUtaGVpZ2h0OiAxMjBweDsKICBmb250LXNpemU6IDEzcHg7Cn0KI2NvbXBvbmVudHMtZ3JpZC1kZW1vLXBsYXlncm91bmQgcHJlIHsKICBiYWNrZ3JvdW5kOiAjZjlmOWY5OwogIGJvcmRlci1yYWRpdXM6IDZweDsKICBmb250LXNpemU6IDEzcHg7CiAgcGFkZGluZzogOHB4IDE2cHg7Cn0KW2RhdGEtdGhlbWU9J2RhcmsnXSAjY29tcG9uZW50cy1ncmlkLWRlbW8tcGxheWdyb3VuZCBwcmUgewogIGJhY2tncm91bmQ6ICMyZjJmMmY7Cn0KPC9zdHlsZT4="}},{default:t(()=>[n("div",In,[n("div",mn,[s[3]||(s[3]=n("span",{style:{"margin-right":"6px"}},"Horizontal Gutter (px):",-1)),n("div",Cn,[o(g,{value:p.gutterKey,"onUpdate:value":s[0]||(s[0]=d=>p.gutterKey=d),min:0,max:Object.keys(p.gutters).length-1,marks:p.gutters,step:null},null,8,["value","max","marks"])]),s[4]||(s[4]=n("span",{style:{"margin-right":"6px"}},"Vertical Gutter (px):",-1)),n("div",bn,[o(g,{value:p.vgutterKey,"onUpdate:value":s[1]||(s[1]=d=>p.vgutterKey=d),min:0,max:Object.keys(p.vgutters).length-1,marks:p.vgutters,step:null},null,8,["value","max","marks"])]),s[5]||(s[5]=n("span",{style:{"margin-right":"6px"}},"Column Count:",-1)),n("div",vn,[o(g,{value:p.colCountKey,"onUpdate:value":s[2]||(s[2]=d=>p.colCountKey=d),min:0,max:Object.keys(p.colCounts).length-1,marks:p.colCounts,step:null},null,8,["value","max","marks"])])]),o(v,{gutter:[p.gutters[p.gutterKey],p.vgutters[p.vgutterKey]]},{default:t(()=>[(k(!0),C(w,null,h(p.colCounts[p.colCountKey],d=>(k(),i(m,{key:d.toString(),span:24/p.colCounts[p.colCountKey]},{default:t(()=>s[6]||(s[6]=[n("div",null,"Column",-1)])),_:2,__:[6]},1032,["span"]))),128)),(k(!0),C(w,null,h(p.colCounts[p.colCountKey],d=>(k(),i(m,{key:d.toString(),span:24/p.colCounts[p.colCountKey]},{default:t(()=>s[7]||(s[7]=[n("div",null,"Column",-1)])),_:2,__:[7]},1032,["span"]))),128))]),_:1},8,["gutter"]),n("pre",null,y(p.rowColHtml),1),s[8]||(s[8]=n("br",null,null,-1)),n("pre",null,y(p.rowColHtml),1)])]),htmlCode:t(()=>s[9]||(s[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("components-grid-demo-playground"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Horizontal Gutter (px):"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutterKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(gutters).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutters"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Vertical Gutter (px):"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vgutterKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(vgutters).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vgutters"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Column Count:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("colCountKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(colCounts).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("colCounts"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("[gutters[gutterKey], vgutters[vgutterKey]]"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(`
        `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item in colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item.toString()"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24 / colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a("Column"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`

      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(`
        `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item in colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item.toString()"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24 / colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a("Column"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("pre")]),n("span",{class:"token punctuation"},">")]),a("{{ rowColHtml }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("pre")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("pre")]),n("span",{class:"token punctuation"},">")]),a("{{ rowColHtml }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("pre")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),a(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(" reactive"),n("span",{class:"token operator"},"<"),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"gutterKey"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token literal-property property"},"vgutterKey"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token literal-property property"},"colCountKey"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token literal-property property"},"gutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token punctuation"},"["),a("key"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},":"),a(" number "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token literal-property property"},"colCounts"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token punctuation"},"["),a("key"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},":"),a(" number "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token literal-property property"},"vgutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),a(),n("span",{class:"token punctuation"},"["),a("key"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},":"),a(" number "),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"gutterKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"vgutterKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"colCountKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"gutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"colCounts"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"vgutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"16"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"32"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"40"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"48"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"value"),n("span",{class:"token operator"},":"),a(" number"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token literal-property property"},"i"),n("span",{class:"token operator"},":"),a(" number")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("gutters"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"16"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"32"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"40"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"48"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("value"),n("span",{class:"token punctuation"},","),a(" i")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("vgutters"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"6"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"12"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("value"),n("span",{class:"token punctuation"},","),a(" i")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("colCounts"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rowColHtml "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" colCount "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("colCounts"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("colCountKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" getter "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("gutters"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("gutterKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(" state"),n("span",{class:"token punctuation"},"."),a("vgutters"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("vgutterKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" colCode "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token string"},`'<a-row :gutter="['`),a(),n("span",{class:"token operator"},"+"),a(" getter "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token string"},`']">\\n'`),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"for"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"let"),a(" i "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},";"),a(" i "),n("span",{class:"token operator"},"<"),a(" colCount"),n("span",{class:"token punctuation"},";"),a(" i"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"const"),a(" spanNum "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"24"),a(),n("span",{class:"token operator"},"/"),a(" colCount"),n("span",{class:"token punctuation"},";"),a(`
        colCode `),n("span",{class:"token operator"},"+="),a(),n("span",{class:"token string"},`'  <a-col :span="'`),a(),n("span",{class:"token operator"},"+"),a(" spanNum "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token string"},`'"/>\\n'`),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      colCode `),n("span",{class:"token operator"},"+="),a(),n("span",{class:"token string"},"'</a-row>'"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" colCode"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      rowColHtml`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground :deep(.ant-col)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" transparent"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground :deep(.ant-col) > div"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #00a0e9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),a(" 120px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"line-height"),n("span",{class:"token punctuation"},":"),a(" 120px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 13px"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground pre"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #f9f9f9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border-radius"),n("span",{class:"token punctuation"},":"),a(" 6px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 13px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 8px 16px"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"[data-theme='dark'] #components-grid-demo-playground pre"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #2f2f2f"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),jsVersionHtml:t(()=>s[10]||(s[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("components-grid-demo-playground"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),a(" 16px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Horizontal Gutter (px):"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutterKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(gutters).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("gutters"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Vertical Gutter (px):"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vgutterKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(vgutters).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("vgutters"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("span")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),a(" 6px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a("Column Count:"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("span")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),a(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),a(" 50%")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-slider")]),a(`
          `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("value")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("colCountKey"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("Object.keys(colCounts).length - 1"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":marks"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("colCounts"),n("span",{class:"token punctuation"},'"')]),a(`
          `),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("null"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token punctuation"},"/>")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-row")]),a(),n("span",{class:"token attr-name"},":gutter"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("[gutters[gutterKey], vgutters[vgutterKey]]"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(`
        `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item in colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item.toString()"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24 / colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a("Column"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`

      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("a-col")]),a(`
        `),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item in colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("item.toString()"),n("span",{class:"token punctuation"},'"')]),a(`
        `),n("span",{class:"token attr-name"},":span"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("24 / colCounts[colCountKey]"),n("span",{class:"token punctuation"},'"')]),a(`
      `),n("span",{class:"token punctuation"},">")]),a(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("div")]),n("span",{class:"token punctuation"},">")]),a("Column"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-col")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("a-row")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("pre")]),n("span",{class:"token punctuation"},">")]),a("{{ rowColHtml }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("pre")]),n("span",{class:"token punctuation"},">")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("br")]),a(),n("span",{class:"token punctuation"},"/>")]),a(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("pre")]),n("span",{class:"token punctuation"},">")]),a("{{ rowColHtml }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("pre")]),n("span",{class:"token punctuation"},">")]),a(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("div")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" computed"),n("span",{class:"token punctuation"},","),a(" defineComponent"),n("span",{class:"token punctuation"},","),a(" reactive"),n("span",{class:"token punctuation"},","),a(" toRefs "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" state "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token literal-property property"},"gutterKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"vgutterKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"colCountKey"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"gutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"colCounts"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token literal-property property"},"vgutters"),n("span",{class:"token operator"},":"),a(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"16"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"32"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"40"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"48"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("value"),n("span",{class:"token punctuation"},","),a(" i")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("gutters"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"16"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"24"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"32"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"40"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"48"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("value"),n("span",{class:"token punctuation"},","),a(" i")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("vgutters"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"2"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"4"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"6"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"8"),n("span",{class:"token punctuation"},","),a(),n("span",{class:"token number"},"12"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"forEach"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[a("value"),n("span",{class:"token punctuation"},","),a(" i")]),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      state`),n("span",{class:"token punctuation"},"."),a("colCounts"),n("span",{class:"token punctuation"},"["),a("i"),n("span",{class:"token punctuation"},"]"),a(),n("span",{class:"token operator"},"="),a(" value"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"const"),a(" rowColHtml "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"computed"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token operator"},"=>"),a(),n("span",{class:"token punctuation"},"{"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" colCount "),n("span",{class:"token operator"},"="),a(" state"),n("span",{class:"token punctuation"},"."),a("colCounts"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("colCountKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"const"),a(" getter "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("gutters"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("gutterKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),a(" state"),n("span",{class:"token punctuation"},"."),a("vgutters"),n("span",{class:"token punctuation"},"["),a("state"),n("span",{class:"token punctuation"},"."),a("vgutterKey"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"let"),a(" colCode "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token string"},`'<a-row :gutter="['`),a(),n("span",{class:"token operator"},"+"),a(" getter "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token string"},`']">\\n'`),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"for"),a(),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"let"),a(" i "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},";"),a(" i "),n("span",{class:"token operator"},"<"),a(" colCount"),n("span",{class:"token punctuation"},";"),a(" i"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
        `),n("span",{class:"token keyword"},"const"),a(" spanNum "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token number"},"24"),a(),n("span",{class:"token operator"},"/"),a(" colCount"),n("span",{class:"token punctuation"},";"),a(`
        colCode `),n("span",{class:"token operator"},"+="),a(),n("span",{class:"token string"},`'  <a-col :span="'`),a(),n("span",{class:"token operator"},"+"),a(" spanNum "),n("span",{class:"token operator"},"+"),a(),n("span",{class:"token string"},`'"/>\\n'`),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token punctuation"},"}"),a(`
      colCode `),n("span",{class:"token operator"},"+="),a(),n("span",{class:"token string"},"'</a-row>'"),n("span",{class:"token punctuation"},";"),a(`
      `),n("span",{class:"token keyword"},"return"),a(" colCode"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
    `),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
      rowColHtml`),n("span",{class:"token punctuation"},","),a(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),a("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),a(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),a(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("style")]),a(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground :deep(.ant-col)"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" transparent"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border"),n("span",{class:"token punctuation"},":"),a(" 0"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground :deep(.ant-col) > div"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #00a0e9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"height"),n("span",{class:"token punctuation"},":"),a(" 120px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"line-height"),n("span",{class:"token punctuation"},":"),a(" 120px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 13px"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"#components-grid-demo-playground pre"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #f9f9f9"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"border-radius"),n("span",{class:"token punctuation"},":"),a(" 6px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"font-size"),n("span",{class:"token punctuation"},":"),a(" 13px"),n("span",{class:"token punctuation"},";"),a(`
  `),n("span",{class:"token property"},"padding"),n("span",{class:"token punctuation"},":"),a(" 8px 16px"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`),n("span",{class:"token selector"},"[data-theme='dark'] #components-grid-demo-playground pre"),a(),n("span",{class:"token punctuation"},"{"),a(`
  `),n("span",{class:"token property"},"background"),n("span",{class:"token punctuation"},":"),a(" #2f2f2f"),n("span",{class:"token punctuation"},";"),a(`
`),n("span",{class:"token punctuation"},"}"),a(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("style")]),n("span",{class:"token punctuation"},">")]),a(`
`)])],-1)])),_:1})}const hn=r(dn,[["render",An],["__scopeId","data-v-60c1267b"]]),wn={pageData:{title:"Grid",description:"",frontmatter:{category:"Components",subtitle:"\u6805\u683C",type:"\u5E03\u5C40",cols:1,title:"Grid",cover:"https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg"},headers:[{level:2,title:"\u8BBE\u8BA1\u7406\u5FF5",slug:"\u8BBE\u8BA1\u7406\u5FF5",content:"\u5728\u591A\u6570\u4E1A\u52A1\u60C5\u51B5\u4E0B\uFF0CAnt Design Vue \u9700\u8981\u5728\u8BBE\u8BA1\u533A\u57DF\u5185\u89E3\u51B3\u5927\u91CF\u4FE1\u606F\u6536\u7EB3\u7684\u95EE\u9898\uFF0C\u56E0\u6B64\u5728 12 \u6805\u683C\u7CFB\u7EDF\u7684\u57FA\u7840\u4E0A\uFF0C\u6211\u4EEC\u5C06\u6574\u4E2A\u8BBE\u8BA1\u5EFA\u8BAE\u533A\u57DF\u6309\u7167 24 \u7B49\u5206\u7684\u539F\u5219\u8FDB\u884C\u5212\u5206\u3002\u5212\u5206\u4E4B\u540E\u7684\u4FE1\u606F\u533A\u5757\u6211\u4EEC\u79F0\u4E4B\u4E3A\u300E\u76D2\u5B50\u300F\u3002\u5EFA\u8BAE\u6A2A\u5411\u6392\u5217\u7684\u76D2\u5B50\u6570\u91CF\u6700\u591A\u56DB\u4E2A\uFF0C\u6700\u5C11\u4E00\u4E2A\u3002\u300E\u76D2\u5B50\u300F\u5728\u6574\u4E2A\u5C4F\u5E55\u4E0A\u5360\u6BD4\u89C1\u4E0A\u56FE\u3002\u8BBE\u8BA1\u90E8\u5206\u57FA\u4E8E\u76D2\u5B50\u7684\u5355\u4F4D\u5B9A\u5236\u76D2\u5B50\u5185\u90E8\u7684\u6392\u7248\u89C4\u5219\uFF0C\u4EE5\u4FDD\u8BC1\u89C6\u89C9\u5C42\u9762\u7684\u8212\u9002\u611F\u3002"},{level:2,title:"\u6982\u8FF0",slug:"\u6982\u8FF0",content:"\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\u4E0B\u9762\u7B80\u5355\u4ECB\u7ECD\u4E00\u4E0B\u5B83\u7684\u5DE5\u4F5C\u539F\u7406\uFF1A"},{level:2,title:"Flex \u5E03\u5C40",slug:"Flex-\u5E03\u5C40",content:"\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 order \u6765\u5B9A\u4E49\u5143\u7D20\u7684\u6392\u5217\u987A\u5E8F\u3002 Flex \u5E03\u5C40\u662F\u57FA\u4E8E 24 \u6805\u683C\u6765\u5B9A\u4E49\u6BCF\u4E00\u4E2A\u300E\u76D2\u5B50\u300F\u7684\u5BBD\u5EA6\uFF0C\u4F46\u4E0D\u62D8\u6CE5\u4E8E\u6805\u683C\u3002"},{level:2,title:"API",slug:"API",content:"Row"},{level:3,title:"Row",slug:"Row",content:""},{level:3,title:"Col",slug:"Col",content:""}],relativePath:"components/grid/index.zh-CN.md",content:"\n24 \u6805\u683C\u7CFB\u7EDF\u3002\n\n## \u8BBE\u8BA1\u7406\u5FF5\n\n\u5728\u591A\u6570\u4E1A\u52A1\u60C5\u51B5\u4E0B\uFF0CAnt Design Vue \u9700\u8981\u5728\u8BBE\u8BA1\u533A\u57DF\u5185\u89E3\u51B3\u5927\u91CF\u4FE1\u606F\u6536\u7EB3\u7684\u95EE\u9898\uFF0C\u56E0\u6B64\u5728 12 \u6805\u683C\u7CFB\u7EDF\u7684\u57FA\u7840\u4E0A\uFF0C\u6211\u4EEC\u5C06\u6574\u4E2A\u8BBE\u8BA1\u5EFA\u8BAE\u533A\u57DF\u6309\u7167 24 \u7B49\u5206\u7684\u539F\u5219\u8FDB\u884C\u5212\u5206\u3002\u5212\u5206\u4E4B\u540E\u7684\u4FE1\u606F\u533A\u5757\u6211\u4EEC\u79F0\u4E4B\u4E3A\u300E\u76D2\u5B50\u300F\u3002\u5EFA\u8BAE\u6A2A\u5411\u6392\u5217\u7684\u76D2\u5B50\u6570\u91CF\u6700\u591A\u56DB\u4E2A\uFF0C\u6700\u5C11\u4E00\u4E2A\u3002\u300E\u76D2\u5B50\u300F\u5728\u6574\u4E2A\u5C4F\u5E55\u4E0A\u5360\u6BD4\u89C1\u4E0A\u56FE\u3002\u8BBE\u8BA1\u90E8\u5206\u57FA\u4E8E\u76D2\u5B50\u7684\u5355\u4F4D\u5B9A\u5236\u76D2\u5B50\u5185\u90E8\u7684\u6392\u7248\u89C4\u5219\uFF0C\u4EE5\u4FDD\u8BC1\u89C6\u89C9\u5C42\u9762\u7684\u8212\u9002\u611F\u3002\n\n## \u6982\u8FF0\n\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\u4E0B\u9762\u7B80\u5355\u4ECB\u7ECD\u4E00\u4E0B\u5B83\u7684\u5DE5\u4F5C\u539F\u7406\uFF1A\n\n- \u901A\u8FC7\\`row\\`\u5728\u6C34\u5E73\u65B9\u5411\u5EFA\u7ACB\u4E00\u7EC4\\`column\\`\uFF08\u7B80\u5199 col\uFF09\n- \u4F60\u7684\u5185\u5BB9\u5E94\u5F53\u653E\u7F6E\u4E8E\\`col\\`\u5185\uFF0C\u5E76\u4E14\uFF0C\u53EA\u6709\\`col\\`\u53EF\u4EE5\u4F5C\u4E3A\\`row\\`\u7684\u76F4\u63A5\u5143\u7D20\n- \u6805\u683C\u7CFB\u7EDF\u4E2D\u7684\u5217\u662F\u6307 1 \u5230 24 \u7684\u503C\u6765\u8868\u793A\u5176\u8DE8\u8D8A\u7684\u8303\u56F4\u3002\u4F8B\u5982\uFF0C\u4E09\u4E2A\u7B49\u5BBD\u7684\u5217\u53EF\u4EE5\u4F7F\u7528 \\`&lt;a-col :span=&quot;8&quot; /&gt;\\` \u6765\u521B\u5EFA\n- \u5982\u679C\u4E00\u4E2A\\`row\\`\u4E2D\u7684\\`col\\`\u603B\u548C\u8D85\u8FC7 24\uFF0C\u90A3\u4E48\u591A\u4F59\u7684\\`col\\`\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u6574\u4F53\u53E6\u8D77\u4E00\u884C\u6392\u5217\n\n## Flex \u5E03\u5C40\n\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 order \u6765\u5B9A\u4E49\u5143\u7D20\u7684\u6392\u5217\u987A\u5E8F\u3002 Flex \u5E03\u5C40\u662F\u57FA\u4E8E 24 \u6805\u683C\u6765\u5B9A\u4E49\u6BCF\u4E00\u4E2A\u300E\u76D2\u5B50\u300F\u7684\u5BBD\u5EA6\uFF0C\u4F46\u4E0D\u62D8\u6CE5\u4E8E\u6805\u683C\u3002\n\n## API\n\n### Row\n\n| \u6210\u5458 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |\n| --- | --- | --- | --- |\n| align | flex \u5E03\u5C40\u4E0B\u7684\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F\uFF1A`top` `middle` `bottom` | string | `top` |\n| gutter | \u6805\u683C\u95F4\u9694\uFF0C\u53EF\u4EE5\u5199\u6210\u50CF\u7D20\u503C\u6216\u652F\u6301\u54CD\u5E94\u5F0F\u7684\u5BF9\u8C61\u5199\u6CD5\u6765\u8BBE\u7F6E\u6C34\u5E73\u95F4\u9694 `{ xs: 8, sm: 16, md: 24}`\u3002\u6216\u8005\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u540C\u65F6\u8BBE\u7F6E `[\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]`\uFF08`1.5.0 \u540E\u652F\u6301`\uFF09\u3002 | number/object/array | 0 |\n| justify | flex \u5E03\u5C40\u4E0B\u7684\u6C34\u5E73\u6392\u5217\u65B9\u5F0F\uFF1A`start` `end` `center` `space-around` `space-between` | string | `start` |\n| wrap | \u662F\u5426\u81EA\u52A8\u6362\u884C | boolean | false |\n\n### Col\n\n| \u6210\u5458 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |\n| --- | --- | --- | --- | --- |\n| flex | flex \u5E03\u5C40\u586B\u5145 | string\\|number | - |  |\n| offset | \u6805\u683C\u5DE6\u4FA7\u7684\u95F4\u9694\u683C\u6570\uFF0C\u95F4\u9694\u5185\u4E0D\u53EF\u4EE5\u6709\u6805\u683C | number | 0 |  |\n| order | \u6805\u683C\u987A\u5E8F\uFF0C`flex` \u5E03\u5C40\u6A21\u5F0F\u4E0B\u6709\u6548 | number | 0 |  |\n| pull | \u6805\u683C\u5411\u5DE6\u79FB\u52A8\u683C\u6570 | number | 0 |  |\n| push | \u6805\u683C\u5411\u53F3\u79FB\u52A8\u683C\u6570 | number | 0 |  |\n| span | \u6805\u683C\u5360\u4F4D\u683C\u6570\uFF0C\u4E3A 0 \u65F6\u76F8\u5F53\u4E8E `display: none` | number | - |  |\n| xxxl | `\u22652000px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - | 3.0 |\n| xs | `&lt;576px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n| sm | `\u2265576px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n| md | `\u2265768px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n| lg | `\u2265992px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n| xl | `\u22651200px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n| xxl | `\u22651600px` \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61 | number\\|object | - |  |\n\n\u54CD\u5E94\u5F0F\u6805\u683C\u7684\u65AD\u70B9\u6269\u5C55\u81EA [BootStrap 4 \u7684\u89C4\u5219](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)\uFF08\u4E0D\u5305\u542B\u94FE\u63A5\u91CC `occasionally` \u7684\u90E8\u5206)\u3002\n",html:`<p>24 \u6805\u683C\u7CFB\u7EDF\u3002</p>
<h2 id="\u8BBE\u8BA1\u7406\u5FF5">\u8BBE\u8BA1\u7406\u5FF5 <a class="header-anchor" href="#\u8BBE\u8BA1\u7406\u5FF5">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5728\u591A\u6570\u4E1A\u52A1\u60C5\u51B5\u4E0B\uFF0CAnt Design Vue \u9700\u8981\u5728\u8BBE\u8BA1\u533A\u57DF\u5185\u89E3\u51B3\u5927\u91CF\u4FE1\u606F\u6536\u7EB3\u7684\u95EE\u9898\uFF0C\u56E0\u6B64\u5728 12 \u6805\u683C\u7CFB\u7EDF\u7684\u57FA\u7840\u4E0A\uFF0C\u6211\u4EEC\u5C06\u6574\u4E2A\u8BBE\u8BA1\u5EFA\u8BAE\u533A\u57DF\u6309\u7167 24 \u7B49\u5206\u7684\u539F\u5219\u8FDB\u884C\u5212\u5206\u3002\u5212\u5206\u4E4B\u540E\u7684\u4FE1\u606F\u533A\u5757\u6211\u4EEC\u79F0\u4E4B\u4E3A\u300E\u76D2\u5B50\u300F\u3002\u5EFA\u8BAE\u6A2A\u5411\u6392\u5217\u7684\u76D2\u5B50\u6570\u91CF\u6700\u591A\u56DB\u4E2A\uFF0C\u6700\u5C11\u4E00\u4E2A\u3002\u300E\u76D2\u5B50\u300F\u5728\u6574\u4E2A\u5C4F\u5E55\u4E0A\u5360\u6BD4\u89C1\u4E0A\u56FE\u3002\u8BBE\u8BA1\u90E8\u5206\u57FA\u4E8E\u76D2\u5B50\u7684\u5355\u4F4D\u5B9A\u5236\u76D2\u5B50\u5185\u90E8\u7684\u6392\u7248\u89C4\u5219\uFF0C\u4EE5\u4FDD\u8BC1\u89C6\u89C9\u5C42\u9762\u7684\u8212\u9002\u611F\u3002</p>
<h2 id="\u6982\u8FF0">\u6982\u8FF0 <a class="header-anchor" href="#\u6982\u8FF0">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\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\u4E0B\u9762\u7B80\u5355\u4ECB\u7ECD\u4E00\u4E0B\u5B83\u7684\u5DE5\u4F5C\u539F\u7406\uFF1A</p>
<ul>
<li>\u901A\u8FC7\`row\`\u5728\u6C34\u5E73\u65B9\u5411\u5EFA\u7ACB\u4E00\u7EC4\`column\`\uFF08\u7B80\u5199 col\uFF09</li>
<li>\u4F60\u7684\u5185\u5BB9\u5E94\u5F53\u653E\u7F6E\u4E8E\`col\`\u5185\uFF0C\u5E76\u4E14\uFF0C\u53EA\u6709\`col\`\u53EF\u4EE5\u4F5C\u4E3A\`row\`\u7684\u76F4\u63A5\u5143\u7D20</li>
<li>\u6805\u683C\u7CFB\u7EDF\u4E2D\u7684\u5217\u662F\u6307 1 \u5230 24 \u7684\u503C\u6765\u8868\u793A\u5176\u8DE8\u8D8A\u7684\u8303\u56F4\u3002\u4F8B\u5982\uFF0C\u4E09\u4E2A\u7B49\u5BBD\u7684\u5217\u53EF\u4EE5\u4F7F\u7528 \`<a-col :span="8" />\` \u6765\u521B\u5EFA</li>
<li>\u5982\u679C\u4E00\u4E2A\`row\`\u4E2D\u7684\`col\`\u603B\u548C\u8D85\u8FC7 24\uFF0C\u90A3\u4E48\u591A\u4F59\u7684\`col\`\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u6574\u4F53\u53E6\u8D77\u4E00\u884C\u6392\u5217</li>
</ul>
<h2 id="Flex-\u5E03\u5C40">Flex \u5E03\u5C40 <a class="header-anchor" href="#Flex-\u5E03\u5C40">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\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 order \u6765\u5B9A\u4E49\u5143\u7D20\u7684\u6392\u5217\u987A\u5E8F\u3002 Flex \u5E03\u5C40\u662F\u57FA\u4E8E 24 \u6805\u683C\u6765\u5B9A\u4E49\u6BCF\u4E00\u4E2A\u300E\u76D2\u5B50\u300F\u7684\u5BBD\u5EA6\uFF0C\u4F46\u4E0D\u62D8\u6CE5\u4E8E\u6805\u683C\u3002</p>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="Row">Row <a class="header-anchor" href="#Row">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u6210\u5458</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>flex \u5E03\u5C40\u4E0B\u7684\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F\uFF1A<code>top</code> <code>middle</code> <code>bottom</code></td>
<td>string</td>
<td><code>top</code></td>
</tr>
<tr>
<td>gutter</td>
<td>\u6805\u683C\u95F4\u9694\uFF0C\u53EF\u4EE5\u5199\u6210\u50CF\u7D20\u503C\u6216\u652F\u6301\u54CD\u5E94\u5F0F\u7684\u5BF9\u8C61\u5199\u6CD5\u6765\u8BBE\u7F6E\u6C34\u5E73\u95F4\u9694 <code>{ xs: 8, sm: 16, md: 24}</code>\u3002\u6216\u8005\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u540C\u65F6\u8BBE\u7F6E <code>[\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]</code>\uFF08<code>1.5.0 \u540E\u652F\u6301</code>\uFF09\u3002</td>
<td>number/object/array</td>
<td>0</td>
</tr>
<tr>
<td>justify</td>
<td>flex \u5E03\u5C40\u4E0B\u7684\u6C34\u5E73\u6392\u5217\u65B9\u5F0F\uFF1A<code>start</code> <code>end</code> <code>center</code> <code>space-around</code> <code>space-between</code></td>
<td>string</td>
<td><code>start</code></td>
</tr>
<tr>
<td>wrap</td>
<td>\u662F\u5426\u81EA\u52A8\u6362\u884C</td>
<td>boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<h3 id="Col">Col <a class="header-anchor" href="#Col">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u6210\u5458</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex</td>
<td>flex \u5E03\u5C40\u586B\u5145</td>
<td>string|number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>offset</td>
<td>\u6805\u683C\u5DE6\u4FA7\u7684\u95F4\u9694\u683C\u6570\uFF0C\u95F4\u9694\u5185\u4E0D\u53EF\u4EE5\u6709\u6805\u683C</td>
<td>number</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>order</td>
<td>\u6805\u683C\u987A\u5E8F\uFF0C<code>flex</code> \u5E03\u5C40\u6A21\u5F0F\u4E0B\u6709\u6548</td>
<td>number</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>pull</td>
<td>\u6805\u683C\u5411\u5DE6\u79FB\u52A8\u683C\u6570</td>
<td>number</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>push</td>
<td>\u6805\u683C\u5411\u53F3\u79FB\u52A8\u683C\u6570</td>
<td>number</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>span</td>
<td>\u6805\u683C\u5360\u4F4D\u683C\u6570\uFF0C\u4E3A 0 \u65F6\u76F8\u5F53\u4E8E <code>display: none</code></td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xxxl</td>
<td><code>\u22652000px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td>3.0</td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td>
<td>number|object</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
<p>\u54CD\u5E94\u5F0F\u6805\u683C\u7684\u65AD\u70B9\u6269\u5C55\u81EA <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">BootStrap 4 \u7684\u89C4\u5219</a>\uFF08\u4E0D\u5305\u542B\u94FE\u63A5\u91CC <code>occasionally</code> \u7684\u90E8\u5206)\u3002</p>
`,lastUpdated:1748060300758}},yn={class:"markdown"};function fn(p,s,e,c,u,I){const g=l("a-col");return k(),C("article",yn,[s[5]||(s[5]=b('<p>24 \u6805\u683C\u7CFB\u7EDF\u3002</p><h2 id="\u8BBE\u8BA1\u7406\u5FF5">\u8BBE\u8BA1\u7406\u5FF5 <a class="header-anchor" href="#\u8BBE\u8BA1\u7406\u5FF5"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u5728\u591A\u6570\u4E1A\u52A1\u60C5\u51B5\u4E0B\uFF0CAnt Design Vue \u9700\u8981\u5728\u8BBE\u8BA1\u533A\u57DF\u5185\u89E3\u51B3\u5927\u91CF\u4FE1\u606F\u6536\u7EB3\u7684\u95EE\u9898\uFF0C\u56E0\u6B64\u5728 12 \u6805\u683C\u7CFB\u7EDF\u7684\u57FA\u7840\u4E0A\uFF0C\u6211\u4EEC\u5C06\u6574\u4E2A\u8BBE\u8BA1\u5EFA\u8BAE\u533A\u57DF\u6309\u7167 24 \u7B49\u5206\u7684\u539F\u5219\u8FDB\u884C\u5212\u5206\u3002\u5212\u5206\u4E4B\u540E\u7684\u4FE1\u606F\u533A\u5757\u6211\u4EEC\u79F0\u4E4B\u4E3A\u300E\u76D2\u5B50\u300F\u3002\u5EFA\u8BAE\u6A2A\u5411\u6392\u5217\u7684\u76D2\u5B50\u6570\u91CF\u6700\u591A\u56DB\u4E2A\uFF0C\u6700\u5C11\u4E00\u4E2A\u3002\u300E\u76D2\u5B50\u300F\u5728\u6574\u4E2A\u5C4F\u5E55\u4E0A\u5360\u6BD4\u89C1\u4E0A\u56FE\u3002\u8BBE\u8BA1\u90E8\u5206\u57FA\u4E8E\u76D2\u5B50\u7684\u5355\u4F4D\u5B9A\u5236\u76D2\u5B50\u5185\u90E8\u7684\u6392\u7248\u89C4\u5219\uFF0C\u4EE5\u4FDD\u8BC1\u89C6\u89C9\u5C42\u9762\u7684\u8212\u9002\u611F\u3002</p><h2 id="\u6982\u8FF0">\u6982\u8FF0 <a class="header-anchor" href="#\u6982\u8FF0"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\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\u4E0B\u9762\u7B80\u5355\u4ECB\u7ECD\u4E00\u4E0B\u5B83\u7684\u5DE5\u4F5C\u539F\u7406\uFF1A</p>',5)),n("ul",null,[s[2]||(s[2]=n("li",null,"\u901A\u8FC7`row`\u5728\u6C34\u5E73\u65B9\u5411\u5EFA\u7ACB\u4E00\u7EC4`column`\uFF08\u7B80\u5199 col\uFF09",-1)),s[3]||(s[3]=n("li",null,"\u4F60\u7684\u5185\u5BB9\u5E94\u5F53\u653E\u7F6E\u4E8E`col`\u5185\uFF0C\u5E76\u4E14\uFF0C\u53EA\u6709`col`\u53EF\u4EE5\u4F5C\u4E3A`row`\u7684\u76F4\u63A5\u5143\u7D20",-1)),n("li",null,[s[0]||(s[0]=a("\u6805\u683C\u7CFB\u7EDF\u4E2D\u7684\u5217\u662F\u6307 1 \u5230 24 \u7684\u503C\u6765\u8868\u793A\u5176\u8DE8\u8D8A\u7684\u8303\u56F4\u3002\u4F8B\u5982\uFF0C\u4E09\u4E2A\u7B49\u5BBD\u7684\u5217\u53EF\u4EE5\u4F7F\u7528 `")),o(g,{span:8}),s[1]||(s[1]=a("` \u6765\u521B\u5EFA"))]),s[4]||(s[4]=n("li",null,"\u5982\u679C\u4E00\u4E2A`row`\u4E2D\u7684`col`\u603B\u548C\u8D85\u8FC7 24\uFF0C\u90A3\u4E48\u591A\u4F59\u7684`col`\u4F1A\u4F5C\u4E3A\u4E00\u4E2A\u6574\u4F53\u53E6\u8D77\u4E00\u884C\u6392\u5217",-1))]),s[6]||(s[6]=b('<h2 id="Flex-\u5E03\u5C40">Flex \u5E03\u5C40 <a class="header-anchor" href="#Flex-\u5E03\u5C40"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\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 order \u6765\u5B9A\u4E49\u5143\u7D20\u7684\u6392\u5217\u987A\u5E8F\u3002 Flex \u5E03\u5C40\u662F\u57FA\u4E8E 24 \u6805\u683C\u6765\u5B9A\u4E49\u6BCF\u4E00\u4E2A\u300E\u76D2\u5B50\u300F\u7684\u5BBD\u5EA6\uFF0C\u4F46\u4E0D\u62D8\u6CE5\u4E8E\u6805\u683C\u3002</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Row">Row <a class="header-anchor" href="#Row"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u6210\u5458</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>align</td><td>flex \u5E03\u5C40\u4E0B\u7684\u5782\u76F4\u5BF9\u9F50\u65B9\u5F0F\uFF1A<code>top</code> <code>middle</code> <code>bottom</code></td><td>string</td><td><code>top</code></td></tr><tr><td>gutter</td><td>\u6805\u683C\u95F4\u9694\uFF0C\u53EF\u4EE5\u5199\u6210\u50CF\u7D20\u503C\u6216\u652F\u6301\u54CD\u5E94\u5F0F\u7684\u5BF9\u8C61\u5199\u6CD5\u6765\u8BBE\u7F6E\u6C34\u5E73\u95F4\u9694 <code>{ xs: 8, sm: 16, md: 24}</code>\u3002\u6216\u8005\u4F7F\u7528\u6570\u7EC4\u5F62\u5F0F\u540C\u65F6\u8BBE\u7F6E <code>[\u6C34\u5E73\u95F4\u8DDD, \u5782\u76F4\u95F4\u8DDD]</code>\uFF08<code>1.5.0 \u540E\u652F\u6301</code>\uFF09\u3002</td><td>number/object/array</td><td>0</td></tr><tr><td>justify</td><td>flex \u5E03\u5C40\u4E0B\u7684\u6C34\u5E73\u6392\u5217\u65B9\u5F0F\uFF1A<code>start</code> <code>end</code> <code>center</code> <code>space-around</code> <code>space-between</code></td><td>string</td><td><code>start</code></td></tr><tr><td>wrap</td><td>\u662F\u5426\u81EA\u52A8\u6362\u884C</td><td>boolean</td><td>false</td></tr></tbody></table><h3 id="Col">Col <a class="header-anchor" href="#Col"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u6210\u5458</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>flex</td><td>flex \u5E03\u5C40\u586B\u5145</td><td>string|number</td><td>-</td><td></td></tr><tr><td>offset</td><td>\u6805\u683C\u5DE6\u4FA7\u7684\u95F4\u9694\u683C\u6570\uFF0C\u95F4\u9694\u5185\u4E0D\u53EF\u4EE5\u6709\u6805\u683C</td><td>number</td><td>0</td><td></td></tr><tr><td>order</td><td>\u6805\u683C\u987A\u5E8F\uFF0C<code>flex</code> \u5E03\u5C40\u6A21\u5F0F\u4E0B\u6709\u6548</td><td>number</td><td>0</td><td></td></tr><tr><td>pull</td><td>\u6805\u683C\u5411\u5DE6\u79FB\u52A8\u683C\u6570</td><td>number</td><td>0</td><td></td></tr><tr><td>push</td><td>\u6805\u683C\u5411\u53F3\u79FB\u52A8\u683C\u6570</td><td>number</td><td>0</td><td></td></tr><tr><td>span</td><td>\u6805\u683C\u5360\u4F4D\u683C\u6570\uFF0C\u4E3A 0 \u65F6\u76F8\u5F53\u4E8E <code>display: none</code></td><td>number</td><td>-</td><td></td></tr><tr><td>xxxl</td><td><code>\u22652000px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td>3.0</td></tr><tr><td>xs</td><td><code>&lt;576px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr><tr><td>sm</td><td><code>\u2265576px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr><tr><td>md</td><td><code>\u2265768px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr><tr><td>lg</td><td><code>\u2265992px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr><tr><td>xl</td><td><code>\u22651200px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr><tr><td>xxl</td><td><code>\u22651600px</code> \u54CD\u5E94\u5F0F\u6805\u683C\uFF0C\u53EF\u4E3A\u6805\u683C\u6570\u6216\u4E00\u4E2A\u5305\u542B\u5176\u4ED6\u5C5E\u6027\u7684\u5BF9\u8C61</td><td>number|object</td><td>-</td><td></td></tr></tbody></table><p>\u54CD\u5E94\u5F0F\u6805\u683C\u7684\u65AD\u70B9\u6269\u5C55\u81EA <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">BootStrap 4 \u7684\u89C4\u5219</a>\uFF08\u4E0D\u5305\u542B\u94FE\u63A5\u91CC <code>occasionally</code> \u7684\u90E8\u5206)\u3002</p>',8))])}const xn=r(wn,[["render",fn]]),jn={pageData:{title:"Grid",description:"",frontmatter:{category:"Components",type:"Layout",cols:1,title:"Grid",cover:"https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg"},headers:[{level:2,title:"Design concept",slug:"Design-concept",content:"In most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections."},{level:2,title:"Outline",slug:"Outline",content:"In the grid system, we define the frame outside the information area based on \\`row\\` and \\`column\\`, to ensure that every area can have stable arrangement."},{level:2,title:"Flex layout",slug:"Flex-layout",content:'Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \\`order\\`. Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.'},{level:2,title:"API",slug:"API",content:"Row"},{level:3,title:"Row",slug:"Row",content:""},{level:3,title:"Col",slug:"Col",content:""}],relativePath:"components/grid/index.en-US.md",content:"\n24 Grids System.\n\n## Design concept\n\nIn most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.\n\nWe name the divided area &#39;box&#39;. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.\n\n## Outline\n\nIn the grid system, we define the frame outside the information area based on \\`row\\` and \\`column\\`, to ensure that every area can have stable arrangement.\n\nFollowing is a brief look at how it works:\n\n- Establish a set of \\`column\\` in the horizontal space defined by \\`row\\` (abbreviated col)\n- Your content elements should be placed directly in the \\`col\\`, and only \\`col\\` should be placed directly in \\`row\\`\n- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by \\`&lt;a-col :span=&quot;8&quot; /&gt;\\`.\n- If the sum of \\`col\\` spans in a \\`row\\` are more than 24, then the overflowing \\`col\\` as a whole will start a new line arrangement.\n\n## Flex layout\n\nOur grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \\`order\\`. Flex layout uses a 24 grid layout to define the width of each &quot;box&quot;, but does not rigidly adhere to the grid layout.\n\n## API\n\n### Row\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |\n| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `1.5.0`) | number/object/array | 0 |\n| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |\n| wrap | Auto wrap line | boolean | false |\n\n### Col\n\n| Property | Description | Type | Default |\n| --- | --- | --- | --- |\n| flex | the layout fill of flex | string\\|number | - |\n| offset | the number of cells to offset Col from the left | number | 0 |\n| order | raster order, used in `flex` layout mode | number | 0 |\n| pull | the number of cells that raster is moved to the left | number | 0 |\n| push | the number of cells that raster is moved to the right | number | 0 |\n| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |\n| xxxl | `\u22652000px`, could be a `span` value or an object containing above props | number\\|object | - |\n| xs | `&lt;576px` and also default setting, could be a `span` value or an object containing above props | number\\|object | - |\n| sm | `\u2265576px`, could be a `span` value or an object containing above props | number\\|object | - |\n| md | `\u2265768px`, could be a `span` value or an object containing above props | number\\|object | - |\n| lg | `\u2265992px`, could be a `span` value or an object containing above props | number\\|object | - |\n| xl | `\u22651200px`, could be a `span` value or an object containing above props | number\\|object | - |\n| xxl | `\u22651600px`, could be a `span` value or an object containing above props | number\\|object | - |\n\nThe breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).\n",html:`<p>24 Grids System.</p>
<h2 id="Design-concept">Design concept <a class="header-anchor" href="#Design-concept">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>In most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.</p>
<p>We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.</p>
<h2 id="Outline">Outline <a class="header-anchor" href="#Outline">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>In the grid system, we define the frame outside the information area based on \`row\` and \`column\`, to ensure that every area can have stable arrangement.</p>
<p>Following is a brief look at how it works:</p>
<ul>
<li>Establish a set of \`column\` in the horizontal space defined by \`row\` (abbreviated col)</li>
<li>Your content elements should be placed directly in the \`col\`, and only \`col\` should be placed directly in \`row\`</li>
<li>The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by \`<a-col :span="8" />\`.</li>
<li>If the sum of \`col\` spans in a \`row\` are more than 24, then the overflowing \`col\` as a whole will start a new line arrangement.</li>
</ul>
<h2 id="Flex-layout">Flex layout <a class="header-anchor" href="#Flex-layout">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \`order\`. Flex layout uses a 24 grid layout to define the width of each &quot;box&quot;, but does not rigidly adhere to the grid layout.</p>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="Row">Row <a class="header-anchor" href="#Row">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>the vertical alignment of the flex layout: <code>top</code> <code>middle</code> <code>bottom</code></td>
<td>string</td>
<td><code>top</code></td>
</tr>
<tr>
<td>gutter</td>
<td>spacing between grids, could be a number or a object like <code>{ xs: 8, sm: 16, md: 24}</code>. or you can use array to make horizontal and vertical spacing work at the same time <code>[horizontal, vertical]</code> (supported after <code>1.5.0</code>)</td>
<td>number/object/array</td>
<td>0</td>
</tr>
<tr>
<td>justify</td>
<td>horizontal arrangement of the flex layout: <code>start</code> <code>end</code> <code>center</code> <code>space-around</code> <code>space-between</code></td>
<td>string</td>
<td><code>start</code></td>
</tr>
<tr>
<td>wrap</td>
<td>Auto wrap line</td>
<td>boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<h3 id="Col">Col <a class="header-anchor" href="#Col">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex</td>
<td>the layout fill of flex</td>
<td>string|number</td>
<td>-</td>
</tr>
<tr>
<td>offset</td>
<td>the number of cells to offset Col from the left</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>order</td>
<td>raster order, used in <code>flex</code> layout mode</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>pull</td>
<td>the number of cells that raster is moved to the left</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>push</td>
<td>the number of cells that raster is moved to the right</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>span</td>
<td>raster number of cells to occupy, 0 corresponds to <code>display: none</code></td>
<td>number</td>
<td>none</td>
</tr>
<tr>
<td>xxxl</td>
<td><code>\u22652000px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> and also default setting, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code>, could be a <code>span</code> value or an object containing above props</td>
<td>number|object</td>
<td>-</td>
</tr>
</tbody>
</table>
<p>The breakpoints of responsive grid follow <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">BootStrap 4 media queries rules</a>(not including <code>occasionally part</code>).</p>
`,lastUpdated:1748060300758}},Yn={class:"markdown"};function Pn(p,s,e,c,u,I){const g=l("a-col");return k(),C("article",Yn,[s[5]||(s[5]=b('<p>24 Grids System.</p><h2 id="Design-concept">Design concept <a class="header-anchor" href="#Design-concept"><span aria-hidden="true" class="anchor">#</span></a></h2><p>In most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.</p><p>We name the divided area &#39;box&#39;. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.</p><h2 id="Outline">Outline <a class="header-anchor" href="#Outline"><span aria-hidden="true" class="anchor">#</span></a></h2><p>In the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.</p><p>Following is a brief look at how it works:</p>',7)),n("ul",null,[s[2]||(s[2]=n("li",null,"Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)",-1)),s[3]||(s[3]=n("li",null,"Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`",-1)),n("li",null,[s[0]||(s[0]=a("The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `")),o(g,{span:8}),s[1]||(s[1]=a("`."))]),s[4]||(s[4]=n("li",null,"If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.",-1))]),s[6]||(s[6]=b('<h2 id="Flex-layout">Flex layout <a class="header-anchor" href="#Flex-layout"><span aria-hidden="true" class="anchor">#</span></a></h2><p>Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`. Flex layout uses a 24 grid layout to define the width of each &quot;box&quot;, but does not rigidly adhere to the grid layout.</p><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Row">Row <a class="header-anchor" href="#Row"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>align</td><td>the vertical alignment of the flex layout: <code>top</code> <code>middle</code> <code>bottom</code></td><td>string</td><td><code>top</code></td></tr><tr><td>gutter</td><td>spacing between grids, could be a number or a object like <code>{ xs: 8, sm: 16, md: 24}</code>. or you can use array to make horizontal and vertical spacing work at the same time <code>[horizontal, vertical]</code> (supported after <code>1.5.0</code>)</td><td>number/object/array</td><td>0</td></tr><tr><td>justify</td><td>horizontal arrangement of the flex layout: <code>start</code> <code>end</code> <code>center</code> <code>space-around</code> <code>space-between</code></td><td>string</td><td><code>start</code></td></tr><tr><td>wrap</td><td>Auto wrap line</td><td>boolean</td><td>false</td></tr></tbody></table><h3 id="Col">Col <a class="header-anchor" href="#Col"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>flex</td><td>the layout fill of flex</td><td>string|number</td><td>-</td></tr><tr><td>offset</td><td>the number of cells to offset Col from the left</td><td>number</td><td>0</td></tr><tr><td>order</td><td>raster order, used in <code>flex</code> layout mode</td><td>number</td><td>0</td></tr><tr><td>pull</td><td>the number of cells that raster is moved to the left</td><td>number</td><td>0</td></tr><tr><td>push</td><td>the number of cells that raster is moved to the right</td><td>number</td><td>0</td></tr><tr><td>span</td><td>raster number of cells to occupy, 0 corresponds to <code>display: none</code></td><td>number</td><td>none</td></tr><tr><td>xxxl</td><td><code>\u22652000px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>xs</td><td><code>&lt;576px</code> and also default setting, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>sm</td><td><code>\u2265576px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>md</td><td><code>\u2265768px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>lg</td><td><code>\u2265992px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>xl</td><td><code>\u22651200px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr><tr><td>xxl</td><td><code>\u22651600px</code>, could be a <code>span</code> value or an object containing above props</td><td>number|object</td><td>-</td></tr></tbody></table><p>The breakpoints of responsive grid follow <a href="https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints" target="_blank" rel="noopener noreferrer">BootStrap 4 media queries rules</a>(not including <code>occasionally part</code>).</p>',8))])}const Nn=r(jn,[["render",Pn]]),Dn=f({CN:xn,US:Nn,components:{Basic:X,FlexAlign:z,FlexOrder:H,FlexStretch:O,Flex:T,Gutter:nn,Offset:tn,ResponsiveMore:cn,Responsive:un,Sort:gn,Playfround:hn}});function Zn(p,s,e,c,u,I){const g=l("basic"),m=l("flex-align"),v=l("flex-order"),A=l("flex-stretch"),d=l("flex"),x=l("gutter"),j=l("offset"),Y=l("ResponsiveMore"),P=l("responsive"),N=l("sort"),D=l("playfround"),Z=l("demo-sort");return k(),i(Z,{cols:1},{default:t(()=>[o(g),o(m),o(v),o(A),o(d),o(x),o(j),o(Y),o(P),o(N),o(D)]),_:1})}const Wn=r(Dn,[["render",Zn]]);export{Wn as default};