doc-archive
/
DOCS en-US35.0cb71eee40c7d7b6716e.js

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[30],{

/***/ 788:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.prod.js
var vue_esm_browser_prod = __webpack_require__(0);

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--3-0!./website/md-loader!./website/docs/en-US/layout.md?vue&type=template&id=22e89e12

const layoutvue_type_template_id_22e89e12_hoisted_1 = {
  class: "content element-doc"
};

const layoutvue_type_template_id_22e89e12_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Layout ");

const layoutvue_type_template_id_22e89e12_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Quickly and easily create layouts with the basic 24-column.", -1);

const layoutvue_type_template_id_22e89e12_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", {
  class: "tip"
}, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("The component uses flex layout by default, no need to set "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "type=\"flex\""), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" manually.")]), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Please note that the parent container should avoid using "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "inline"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" related styles, which will cause the component to not fill up its width.")])], -1);

const layoutvue_type_template_id_22e89e12_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Basic layout ");

const layoutvue_type_template_id_22e89e12_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Create basic grid layout using columns.", -1);

const layoutvue_type_template_id_22e89e12_hoisted_7 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("With "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "row"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" and "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "col"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(", we can easily manipulate the layout using the "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "span"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" attribute.")])], -1);

const layoutvue_type_template_id_22e89e12_hoisted_8 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row>\n  <el-col :span=\"24\"><div class=\"grid-content bg-purple-dark\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"12\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n")], -1);

const layoutvue_type_template_id_22e89e12_hoisted_9 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Column spacing ");

const layoutvue_type_template_id_22e89e12_hoisted_10 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Column spacing is supported.", -1);

const layoutvue_type_template_id_22e89e12_hoisted_11 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Row provides "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "gutter"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" attribute to specify spacings between columns, and its default value is 0.")])], -1);

const layoutvue_type_template_id_22e89e12_hoisted_12 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n")], -1);

const layoutvue_type_template_id_22e89e12_hoisted_13 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Hybrid layout ");

const layoutvue_type_template_id_22e89e12_hoisted_14 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Form a more complex hybrid layout by combining the basic 1/24 columns.", -1);

const layoutvue_type_template_id_22e89e12_hoisted_15 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row :gutter=\"20\">\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"8\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"16\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"4\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n")], -1);

const layoutvue_type_template_id_22e89e12_hoisted_16 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Column offset ");

const _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "You can specify column offsets.", -1);

const _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("You can specify the number of column offset by setting the value of "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "offset"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" attribute of Col.")])], -1);

const _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row :gutter=\"20\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\" :offset=\"6\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"6\" :offset=\"6\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n  <el-col :span=\"6\" :offset=\"6\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n</el-row>\n<el-row :gutter=\"20\">\n  <el-col :span=\"12\" :offset=\"6\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n")], -1);

const _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Alignment ");

const _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Default use the flex layout to make flexible alignment of columns.", -1);

const _hoisted_22 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("div", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("You can define the layout of child elements by setting "), /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", null, "justify"), /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])(" attribute with start, center, end, space-between or space-around.")])], -1);

const _hoisted_23 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row class=\"row-bg\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row class=\"row-bg\" justify=\"center\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row class=\"row-bg\" justify=\"end\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row class=\"row-bg\" justify=\"space-between\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n<el-row class=\"row-bg\" justify=\"space-around\">\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple-light\"></div></el-col>\n  <el-col :span=\"6\"><div class=\"grid-content bg-purple\"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n")], -1);

const _hoisted_24 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Responsive Layout ");

const _hoisted_25 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("p", null, "Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.", -1);

const _hoisted_26 = /*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("pre", null, [/*#__PURE__*/Object(vue_esm_browser_prod["createElementVNode"])("code", {
  class: "html"
}, "<el-row :gutter=\"10\">\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"\n    ><div class=\"grid-content bg-purple-light\"></div\n  ></el-col>\n  <el-col :xs=\"4\" :sm=\"6\" :md=\"8\" :lg=\"9\" :xl=\"11\"\n    ><div class=\"grid-content bg-purple\"></div\n  ></el-col>\n  <el-col :xs=\"8\" :sm=\"6\" :md=\"4\" :lg=\"3\" :xl=\"1\"\n    ><div class=\"grid-content bg-purple-light\"></div\n  ></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n")], -1);

const _hoisted_27 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Utility classes for hiding elements ");

const _hoisted_28 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<p>Additionally, Element Plus provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:</p><pre class=\"example-code\"><code class=\"hljs language-js\"><span class=\"hljs-keyword\">import</span> <span class=\"hljs-string\">&#39;element-plus/lib/theme-chalk/display.css&#39;</span>\n</code><span class=\"lang-mark\">js</span></pre><p>The classes are:</p><ul><li><code>hidden-xs-only</code> - hide when on extra small viewports only</li><li><code>hidden-sm-only</code> - hide when on small viewports and down</li><li><code>hidden-sm-and-down</code> - hide when on small viewports and down</li><li><code>hidden-sm-and-up</code> - hide when on small viewports and up</li><li><code>hidden-md-only</code> - hide when on medium viewports only</li><li><code>hidden-md-and-down</code> - hide when on medium viewports and down</li><li><code>hidden-md-and-up</code> - hide when on medium viewports and up</li><li><code>hidden-lg-only</code> - hide when on large viewports only</li><li><code>hidden-lg-and-down</code> - hide when on large viewports and down</li><li><code>hidden-lg-and-up</code> - hide when on large viewports and up</li><li><code>hidden-xl-only</code> - hide when on extra large viewports only</li></ul>", 4);

const _hoisted_32 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Row Attributes ");

const _hoisted_33 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>gutter</td><td>grid spacing</td><td>number</td><td>—</td><td>0</td></tr><tr><td>justify</td><td>horizontal alignment of flex layout</td><td>string</td><td>start/end/center/space-around/space-between</td><td>start</td></tr><tr><td>align</td><td>vertical alignment of flex layout</td><td>string</td><td>top/middle/bottom</td><td>top</td></tr><tr><td>tag</td><td>custom element tag</td><td>string</td><td>*</td><td>div</td></tr></tbody></table>", 1);

const _hoisted_34 = /*#__PURE__*/Object(vue_esm_browser_prod["createTextVNode"])("Col Attributes ");

const _hoisted_35 = /*#__PURE__*/Object(vue_esm_browser_prod["createStaticVNode"])("<table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>span</td><td>number of column the grid spans</td><td>number</td><td>—</td><td>24</td></tr><tr><td>offset</td><td>number of spacing on the left side of the grid</td><td>number</td><td>—</td><td>0</td></tr><tr><td>push</td><td>number of columns that grid moves to the right</td><td>number</td><td>—</td><td>0</td></tr><tr><td>pull</td><td>number of columns that grid moves to the left</td><td>number</td><td>—</td><td>0</td></tr><tr><td>xs</td><td><code>&lt;768px</code> Responsive columns or column props object</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>sm</td><td><code>≥768px</code> Responsive columns or column props object</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>md</td><td><code>≥992px</code> Responsive columns or column props object</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>lg</td><td><code>≥1200px</code> Responsive columns or column props object</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>xl</td><td><code>≥1920px</code> Responsive columns or column props object</td><td>number/object (e.g. {span: 4, offset: 4})</td><td>—</td><td>—</td></tr><tr><td>tag</td><td>custom element tag</td><td>string</td><td>*</td><td>div</td></tr></tbody></table>", 1);

function layoutvue_type_template_id_22e89e12_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_app_link = Object(vue_esm_browser_prod["resolveComponent"])("app-link");

  const _component_app_heading = Object(vue_esm_browser_prod["resolveComponent"])("app-heading");

  const _component_element_demo0 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo0");

  const _component_demo_block = Object(vue_esm_browser_prod["resolveComponent"])("demo-block");

  const _component_element_demo1 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo1");

  const _component_element_demo2 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo2");

  const _component_element_demo3 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo3");

  const _component_element_demo4 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo4");

  const _component_element_demo5 = Object(vue_esm_browser_prod["resolveComponent"])("element-demo5");

  const _component_right_nav = Object(vue_esm_browser_prod["resolveComponent"])("right-nav");

  return Object(vue_esm_browser_prod["openBlock"])(), Object(vue_esm_browser_prod["createElementBlock"])("section", layoutvue_type_template_id_22e89e12_hoisted_1, [Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "layout",
    content: "Layout",
    href: "#layout",
    level: "2"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_2, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#layout"
    })]),
    _: 1
  }), layoutvue_type_template_id_22e89e12_hoisted_3, layoutvue_type_template_id_22e89e12_hoisted_4, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "basic-layout",
    content: "Basic layout",
    href: "#basic-layout",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_5, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#basic-layout"
    })]),
    _: 1
  }), layoutvue_type_template_id_22e89e12_hoisted_6, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo0)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_8]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_7]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "column-spacing",
    content: "Column spacing",
    href: "#column-spacing",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_9, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#column-spacing"
    })]),
    _: 1
  }), layoutvue_type_template_id_22e89e12_hoisted_10, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo1)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_12]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_11]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "hybrid-layout",
    content: "Hybrid layout",
    href: "#hybrid-layout",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_13, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#hybrid-layout"
    })]),
    _: 1
  }), layoutvue_type_template_id_22e89e12_hoisted_14, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo2)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_15]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "column-offset",
    content: "Column offset",
    href: "#column-offset",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [layoutvue_type_template_id_22e89e12_hoisted_16, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#column-offset"
    })]),
    _: 1
  }), _hoisted_17, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo3)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_19]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_18]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "alignment",
    content: "Alignment",
    href: "#alignment",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_20, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#alignment"
    })]),
    _: 1
  }), _hoisted_21, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo4)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_23]),
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_22]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "responsive-layout",
    content: "Responsive Layout",
    href: "#responsive-layout",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_24, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#responsive-layout"
    })]),
    _: 1
  }), _hoisted_25, Object(vue_esm_browser_prod["createVNode"])(_component_demo_block, null, {
    source: Object(vue_esm_browser_prod["withCtx"])(() => [Object(vue_esm_browser_prod["createVNode"])(_component_element_demo5)]),
    highlight: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_26]),
    _: 1
  }), Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "utility-classes-for-hiding-elements",
    content: "Utility classes for hiding elements",
    href: "#utility-classes-for-hiding-elements",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_27, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#utility-classes-for-hiding-elements"
    })]),
    _: 1
  }), _hoisted_28, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "row-attributes",
    content: "Row Attributes",
    href: "#row-attributes",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_32, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#row-attributes"
    })]),
    _: 1
  }), _hoisted_33, Object(vue_esm_browser_prod["createVNode"])(_component_app_heading, {
    id: "col-attributes",
    content: "Col Attributes",
    href: "#col-attributes",
    level: "3"
  }, {
    default: Object(vue_esm_browser_prod["withCtx"])(() => [_hoisted_34, Object(vue_esm_browser_prod["createVNode"])(_component_app_link, {
      class: "header-anchor",
      href: "#col-attributes"
    })]),
    _: 1
  }), _hoisted_35, Object(vue_esm_browser_prod["createVNode"])(_component_right_nav)]);
}
// CONCATENATED MODULE: ./website/docs/en-US/layout.md?vue&type=template&id=22e89e12

// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--3-0!./website/md-loader!./website/docs/en-US/layout.md?vue&type=script&lang=ts

/* harmony default export */ var layoutvue_type_script_lang_ts = ({
  name: 'component-doc',
  components: {
    "element-demo0": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-dark"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_5 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_6 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_7 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_8 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_9 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_10 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_11 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_12 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_13 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_14 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_15 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_16 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, null, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 24
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, null, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 12
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 12
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, null, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_5]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_6]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, null, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_7]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_8]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_9]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_10]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, null, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_11]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_12]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_13]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_14]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_15]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_16]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo1": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo2": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_5 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_6 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_7 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_8 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_9 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 16
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 8
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_5]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_6]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_7]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 16
          }, {
            default: _withCtx(() => [_hoisted_8]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 4
          }, {
            default: _withCtx(() => [_hoisted_9]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo3": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_5 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6,
            offset: 6
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6,
            offset: 6
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6,
            offset: 6
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          gutter: 20
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 12,
            offset: 6
          }, {
            default: _withCtx(() => [_hoisted_5]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo4": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_5 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_6 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_7 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_8 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_9 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_10 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_11 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_12 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_13 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_14 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_15 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, {
          class: "row-bg"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          class: "row-bg",
          justify: "center"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_5]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_6]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          class: "row-bg",
          justify: "end"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_7]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_8]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_9]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          class: "row-bg",
          justify: "space-between"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_10]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_11]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_12]),
            _: 1
          })]),
          _: 1
        }), _createVNode(_component_el_row, {
          class: "row-bg",
          justify: "space-around"
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_13]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_14]),
            _: 1
          }), _createVNode(_component_el_col, {
            span: 6
          }, {
            default: _withCtx(() => [_hoisted_15]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }(),
    "element-demo5": function () {
      const {
        createElementVNode: _createElementVNode,
        resolveComponent: _resolveComponent,
        withCtx: _withCtx,
        createVNode: _createVNode,
        openBlock: _openBlock,
        createElementBlock: _createElementBlock
      } = vue_esm_browser_prod;

      const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple"
      }, null, -1);

      const _hoisted_4 = /*#__PURE__*/_createElementVNode("div", {
        class: "grid-content bg-purple-light"
      }, null, -1);

      function render(_ctx, _cache) {
        const _component_el_col = _resolveComponent("el-col");

        const _component_el_row = _resolveComponent("el-row");

        return _openBlock(), _createElementBlock("div", null, [_createVNode(_component_el_row, {
          gutter: 10
        }, {
          default: _withCtx(() => [_createVNode(_component_el_col, {
            xs: 8,
            sm: 6,
            md: 4,
            lg: 3,
            xl: 1
          }, {
            default: _withCtx(() => [_hoisted_1]),
            _: 1
          }), _createVNode(_component_el_col, {
            xs: 4,
            sm: 6,
            md: 8,
            lg: 9,
            xl: 11
          }, {
            default: _withCtx(() => [_hoisted_2]),
            _: 1
          }), _createVNode(_component_el_col, {
            xs: 4,
            sm: 6,
            md: 8,
            lg: 9,
            xl: 11
          }, {
            default: _withCtx(() => [_hoisted_3]),
            _: 1
          }), _createVNode(_component_el_col, {
            xs: 8,
            sm: 6,
            md: 4,
            lg: 3,
            xl: 1
          }, {
            default: _withCtx(() => [_hoisted_4]),
            _: 1
          })]),
          _: 1
        })]);
      }

      const democomponentExport = {};
      return {
        render,
        ...democomponentExport
      };
    }()
  }
});
// CONCATENATED MODULE: ./website/docs/en-US/layout.md?vue&type=script&lang=ts

// CONCATENATED MODULE: ./website/docs/en-US/layout.md


layoutvue_type_script_lang_ts.render = layoutvue_type_template_id_22e89e12_render

/* harmony default export */ var layout = __webpack_exports__["default"] = (layoutvue_type_script_lang_ts);

/***/ })

}]);