mirror of
https://github.com/element-plus/element-plus.git
synced 2025-02-17 11:49:41 +08:00
78 lines
33 KiB
HTML
78 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Layout | Element Plus</title>
|
|
<meta name="description" content="A VitePress site">
|
|
<link rel="stylesheet" href="/assets/style.235dfb5b.css">
|
|
<link rel="modulepreload" href="/assets/framework.ddfda0ac.js">
|
|
<link rel="modulepreload" href="/assets/framework.506ba982.js">
|
|
<link rel="modulepreload" href="/assets/_commonjsHelpers.4e997714.js">
|
|
<link rel="modulepreload" href="/assets/index.0686aea5.js">
|
|
<link rel="modulepreload" href="/assets/plugin-vue_export-helper.21dcd24c.js">
|
|
<link rel="modulepreload" href="/assets/popup-manager.6a5d91dc.js">
|
|
<link rel="modulepreload" href="/assets/arrow-left.fd31dbfa.js">
|
|
<link rel="modulepreload" href="/assets/arrow-right.7209a220.js">
|
|
<link rel="modulepreload" href="/assets/index.880a75b9.js">
|
|
<link rel="modulepreload" href="/assets/index.570843b3.js">
|
|
<link rel="modulepreload" href="/assets/plugin-vue_export-helper.f1ab819e.js">
|
|
<link rel="modulepreload" href="/assets/circle-plus.f0bb0027.js">
|
|
<link rel="modulepreload" href="/assets/calendar.d22d7d77.js">
|
|
<link rel="modulepreload" href="/assets/caret-bottom.05ac0d8f.js">
|
|
<link rel="modulepreload" href="/assets/chat-round.cb455b99.js">
|
|
<link rel="modulepreload" href="/assets/check.313c0b4b.js">
|
|
<link rel="modulepreload" href="/assets/icon.dfea19fe.js">
|
|
<link rel="modulepreload" href="/assets/delete.b7e01d39.js">
|
|
<link rel="modulepreload" href="/assets/document.6021cf74.js">
|
|
<link rel="modulepreload" href="/assets/zoom-in.42fb902e.js">
|
|
<link rel="modulepreload" href="/assets/edit.24a52114.js">
|
|
<link rel="modulepreload" href="/assets/info-filled.2696f3bb.js">
|
|
<link rel="modulepreload" href="/assets/user.5650fe5f.js">
|
|
<link rel="modulepreload" href="/assets/loading.64045cab.js">
|
|
<link rel="modulepreload" href="/assets/location.2b672bf2.js">
|
|
<link rel="modulepreload" href="/assets/setting.b40e9888.js">
|
|
<link rel="modulepreload" href="/assets/message.89ff9f82.js">
|
|
<link rel="modulepreload" href="/assets/minus.2dc70fa8.js">
|
|
<link rel="modulepreload" href="/assets/more-filled.18074571.js">
|
|
<link rel="modulepreload" href="/assets/picture.da85d8c7.js">
|
|
<link rel="modulepreload" href="/assets/plus.d5046c6a.js">
|
|
<link rel="modulepreload" href="/assets/search.c5a2773a.js">
|
|
<link rel="modulepreload" href="/assets/share.a661f856.js">
|
|
<link rel="modulepreload" href="/assets/star-filled.eb9945df.js">
|
|
<link rel="modulepreload" href="/assets/star.92ed7cf8.js">
|
|
<link rel="modulepreload" href="/assets/timer.5a092951.js">
|
|
<link rel="modulepreload" href="/assets/upload-filled.1d2ec357.js">
|
|
<link rel="modulepreload" href="/assets/upload.8e18ea12.js">
|
|
<link rel="modulepreload" href="/assets/user-filled.d3f6a60e.js">
|
|
<link rel="modulepreload" href="/assets/view.87f04a8a.js">
|
|
<link rel="modulepreload" href="/assets/index.25e7baaa.js">
|
|
<link rel="modulepreload" href="/assets/with-install.c2d3fb3d.js">
|
|
<link rel="modulepreload" href="/assets/dom.bb190f6e.js">
|
|
<link rel="modulepreload" href="/assets/index.9eb6a737.js">
|
|
<link rel="modulepreload" href="/assets/dayjs.min.c5c5e36b.js">
|
|
<link rel="modulepreload" href="/assets/index.1845e45c.js">
|
|
<link rel="modulepreload" href="/assets/index.8e6ac4c1.js">
|
|
<link rel="modulepreload" href="/assets/index.e8050db2.js">
|
|
<link rel="modulepreload" href="/assets/responsive-layout.d70a008b.js">
|
|
<link rel="modulepreload" href="/assets/en-US_component_layout.md.7dde2ba0.lean.js">
|
|
<link rel="modulepreload" href="/assets/app.7235fb74.js">
|
|
|
|
<link rel="icon" href="/images/element-plus-logo-small.svg">
|
|
<link rel="stylesheet" href="//fonts.loli.net/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap">
|
|
<link rel="stylesheet" href="//unpkg.com/nprogress@0.2.0/nprogress.css">
|
|
<script>(()=>{window.supportedLangs=["en-US","zh-CN"]})();</script>
|
|
<script>(()=>{const o=window.supportedLangs,a="preferred_lang",s="en-US",c={en:"en-US",fr:"fr-FR",es:"es-ES"};let t=localStorage.getItem(a)||navigator.language;const n=c[t]||(o.includes(t)?t:s);if(localStorage.setItem(a,n),t=n,!location.pathname.startsWith(`/${t}`)){const e=[`/${t}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=e.endsWith(".html")||e.endsWith("/")?e:e.concat("/")}})();</script>
|
|
<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
|
|
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
|
|
<meta name="twitter:title" content="Layout | Element Plus">
|
|
<meta property="og:title" content="Layout | Element Plus">
|
|
</head>
|
|
<body>
|
|
<div id="app"><div class="App"><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-6f4bb8ce><div class="container" data-v-6f4bb8ce><div class="logo-container" data-v-6f4bb8ce><a href="/" data-v-6f4bb8ce><img class="logo" src="/images/element-plus-logo.svg" alt="Elemenet Plus Logo" data-v-6f4bb8ce></a></div><div class="content" data-v-6f4bb8ce><div id="docsearch" class="algolia-search-box search" data-v-6f4bb8ce></div><nav class="navbar-menu menu" data-v-6f4bb8ce><!--[--><!----><!----><!----><!----><!--]--></nav><!----><div class="translation-container translation" data-v-6f4bb8ce data-v-1e752d22><!----></div><div class="social-links" data-v-6f4bb8ce data-v-16ed5a92><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-16ed5a92 data-v-4d8591cc><i class="el-icon" style="font-size:20px;" data-v-4d8591cc><!--[--><svg width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-4d8591cc><path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z" fill="currentColor"></path></svg><!--]--></i></a><!--]--></div><div class="menu-hamburger hamburger" role="button" data-v-6f4bb8ce><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></div></div></div></div><!----></header><div class="sub-nav"><div class="sidebar-button"><i class="el-icon" style="font-size:24px;"><!--[--><svg viewbox="0 0 24 24"><g fill="none"><path d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M4 18a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z" fill="currentColor"></path><path d="M11 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8z" fill="currentColor"></path></g></svg><!--]--></i></div><button class="el-button el-button--text el-button--default go-back-top" type="button" style=""><!--v-if--><span class=""><!--[-->Back to top<!--]--></span></button></div><aside class="sidebar"><!--[--><div class="sponsors" data-v-670cc81e><p class="sponsors-title" data-v-670cc81e>Sponsored by</p><div class="sponsor-item" data-v-670cc81e data-v-ab191046><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="jnpfsoft" target="_blank" data-v-ab191046><img src="/images/jnpfsoft.jpg" alt="jnpfsoft" data-v-ab191046></a></div><div class="container" data-v-670cc81e><!--[--><div class="sponsor-item" data-v-670cc81e data-v-0514baed><a href="https://bit.dev/?from=element-ui" title="bit" target="_blank" data-v-0514baed><img src="/images/bit.svg" alt="bit" data-v-0514baed></a></div><div class="sponsor-item" data-v-670cc81e data-v-0514baed><a href="https://www.renren.io/?from=element-ui" title="renren.io" target="_blank" data-v-0514baed><img src="/images/renren.png" alt="renren.io" data-v-0514baed></a></div><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-7c07d156><p class="link-text" data-v-7c07d156>Button</p></a><a class="link" href="/en-US/component/border" data-v-7c07d156><p class="link-text" data-v-7c07d156>Border</p></a><a class="link" href="/en-US/component/color" data-v-7c07d156><p class="link-text" data-v-7c07d156>Color</p></a><a class="link" href="/en-US/component/container" data-v-7c07d156><p class="link-text" data-v-7c07d156>Layout Container</p></a><a class="link" href="/en-US/component/icon" data-v-7c07d156><p class="link-text" data-v-7c07d156>Icon</p></a><a class="link active" href="/en-US/component/layout" data-v-7c07d156><p class="link-text" data-v-7c07d156>Layout</p></a><a class="link" href="/en-US/component/link" data-v-7c07d156><p class="link-text" data-v-7c07d156>Link</p></a><a class="link" href="/en-US/component/scrollbar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Scrollbar</p></a><a class="link" href="/en-US/component/space" data-v-7c07d156><p class="link-text" data-v-7c07d156>Space</p></a><a class="link" href="/en-US/component/typography" data-v-7c07d156><p class="link-text" data-v-7c07d156>Typography</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Config Provider</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/cascader" data-v-7c07d156><p class="link-text" data-v-7c07d156>Cascader</p></a><a class="link" href="/en-US/component/checkbox" data-v-7c07d156><p class="link-text" data-v-7c07d156>Checkbox</p></a><a class="link" href="/en-US/component/color-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Color Picker</p></a><a class="link" href="/en-US/component/date-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Date Picker</p></a><a class="link" href="/en-US/component/datetime-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>DateTime Picker</p></a><a class="link" href="/en-US/component/form" data-v-7c07d156><p class="link-text" data-v-7c07d156>Form</p></a><a class="link" href="/en-US/component/input" data-v-7c07d156><p class="link-text" data-v-7c07d156>Input</p></a><a class="link" href="/en-US/component/input-number" data-v-7c07d156><p class="link-text" data-v-7c07d156>Input Number</p></a><a class="link" href="/en-US/component/radio" data-v-7c07d156><p class="link-text" data-v-7c07d156>Radio</p></a><a class="link" href="/en-US/component/rate" data-v-7c07d156><p class="link-text" data-v-7c07d156>Rate</p></a><a class="link" href="/en-US/component/select" data-v-7c07d156><p class="link-text" data-v-7c07d156>Select</p></a><a class="link" href="/en-US/component/select-v2" data-v-7c07d156><p class="link-text" data-v-7c07d156>Virtualized Select</p></a><a class="link" href="/en-US/component/slider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Slider</p></a><a class="link" href="/en-US/component/switch" data-v-7c07d156><p class="link-text" data-v-7c07d156>Switch</p></a><a class="link" href="/en-US/component/time-picker" data-v-7c07d156><p class="link-text" data-v-7c07d156>Time Picker</p></a><a class="link" href="/en-US/component/time-select" data-v-7c07d156><p class="link-text" data-v-7c07d156>Time Select</p></a><a class="link" href="/en-US/component/transfer" data-v-7c07d156><p class="link-text" data-v-7c07d156>Transfer</p></a><a class="link" href="/en-US/component/upload" data-v-7c07d156><p class="link-text" data-v-7c07d156>Upload</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Avatar</p></a><a class="link" href="/en-US/component/badge" data-v-7c07d156><p class="link-text" data-v-7c07d156>Badge</p></a><a class="link" href="/en-US/component/calendar" data-v-7c07d156><p class="link-text" data-v-7c07d156>Calendar</p></a><a class="link" href="/en-US/component/card" data-v-7c07d156><p class="link-text" data-v-7c07d156>Card</p></a><a class="link" href="/en-US/component/carousel" data-v-7c07d156><p class="link-text" data-v-7c07d156>Carousel</p></a><a class="link" href="/en-US/component/collapse" data-v-7c07d156><p class="link-text" data-v-7c07d156>Collapse</p></a><a class="link" href="/en-US/component/descriptions" data-v-7c07d156><p class="link-text" data-v-7c07d156>Descriptions</p></a><a class="link" href="/en-US/component/empty" data-v-7c07d156><p class="link-text" data-v-7c07d156>Empty</p></a><a class="link" href="/en-US/component/image" data-v-7c07d156><p class="link-text" data-v-7c07d156>Image</p></a><a class="link" href="/en-US/component/infinite-scroll" data-v-7c07d156><p class="link-text" data-v-7c07d156>Infinite Scroll</p></a><a class="link" href="/en-US/component/pagination" data-v-7c07d156><p class="link-text" data-v-7c07d156>Pagination</p></a><a class="link" href="/en-US/component/progress" data-v-7c07d156><p class="link-text" data-v-7c07d156>Progress</p></a><a class="link" href="/en-US/component/result" data-v-7c07d156><p class="link-text" data-v-7c07d156>Result</p></a><a class="link" href="/en-US/component/skeleton" data-v-7c07d156><p class="link-text" data-v-7c07d156>Skeleton</p></a><a class="link" href="/en-US/component/table" data-v-7c07d156><p class="link-text" data-v-7c07d156>Table</p></a><a class="link" href="/en-US/component/tag" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tag</p></a><a class="link" href="/en-US/component/timeline" data-v-7c07d156><p class="link-text" data-v-7c07d156>Timeline</p></a><a class="link" href="/en-US/component/tree" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tree</p></a><a class="link" href="/en-US/component/tree-v2" data-v-7c07d156><p class="link-text" data-v-7c07d156>Virtualized Tree</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-7c07d156><p class="link-text" data-v-7c07d156>Affix</p></a><a class="link" href="/en-US/component/breadcrumb" data-v-7c07d156><p class="link-text" data-v-7c07d156>Breadcrumb</p></a><a class="link" href="/en-US/component/dropdown" data-v-7c07d156><p class="link-text" data-v-7c07d156>Dropdown</p></a><a class="link" href="/en-US/component/menu" data-v-7c07d156><p class="link-text" data-v-7c07d156>Menu</p></a><a class="link" href="/en-US/component/page-header" data-v-7c07d156><p class="link-text" data-v-7c07d156>Page Header</p></a><a class="link" href="/en-US/component/steps" data-v-7c07d156><p class="link-text" data-v-7c07d156>Steps</p></a><a class="link" href="/en-US/component/tabs" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tabs</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-7c07d156><p class="link-text" data-v-7c07d156>Alert</p></a><a class="link" href="/en-US/component/dialog" data-v-7c07d156><p class="link-text" data-v-7c07d156>Dialog</p></a><a class="link" href="/en-US/component/drawer" data-v-7c07d156><p class="link-text" data-v-7c07d156>Drawer</p></a><a class="link" href="/en-US/component/loading" data-v-7c07d156><p class="link-text" data-v-7c07d156>Loading</p></a><a class="link" href="/en-US/component/message" data-v-7c07d156><p class="link-text" data-v-7c07d156>Message</p></a><a class="link" href="/en-US/component/message-box" data-v-7c07d156><p class="link-text" data-v-7c07d156>Message Box</p></a><a class="link" href="/en-US/component/notification" data-v-7c07d156><p class="link-text" data-v-7c07d156>Notification</p></a><a class="link" href="/en-US/component/popconfirm" data-v-7c07d156><p class="link-text" data-v-7c07d156>Pop Confirm</p></a><a class="link" href="/en-US/component/popover" data-v-7c07d156><p class="link-text" data-v-7c07d156>Popover</p></a><a class="link" href="/en-US/component/tooltip" data-v-7c07d156><p class="link-text" data-v-7c07d156>Tooltip</p></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/backtop" data-v-7c07d156><p class="link-text" data-v-7c07d156>Backtop</p></a><a class="link" href="/en-US/component/divider" data-v-7c07d156><p class="link-text" data-v-7c07d156>Divider</p></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><main class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="layout" tabindex="-1">Layout <a class="header-anchor" href="#layout" aria-hidden="true">#</a></h1><p>Quickly and easily create layouts with the basic 24-column.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>The component uses flex layout by default, no need to set <code>type="flex"</code> manually.</p><p>Please note that the parent container should avoid using <code>inline</code> related styles, which will cause the component to not fill up its width.</p></div><h2 id="basic-layout" tabindex="-1">Basic layout <a class="header-anchor" href="#basic-layout" aria-hidden="true">#</a></h2><p>Create basic grid layout using columns.</p><!----><h2 id="column-spacing" tabindex="-1">Column spacing <a class="header-anchor" href="#column-spacing" aria-hidden="true">#</a></h2><p>Column spacing is supported.</p><!----><h2 id="hybrid-layout" tabindex="-1">Hybrid layout <a class="header-anchor" href="#hybrid-layout" aria-hidden="true">#</a></h2><p>Form a more complex hybrid layout by combining the basic 1/24 columns.</p><!----><h2 id="column-offset" tabindex="-1">Column offset <a class="header-anchor" href="#column-offset" aria-hidden="true">#</a></h2><p>You can specify column offsets.</p><!----><h2 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-hidden="true">#</a></h2><p>Default use the flex layout to make flexible alignment of columns.</p><!----><h2 id="responsive-layout" tabindex="-1">Responsive Layout <a class="header-anchor" href="#responsive-layout" aria-hidden="true">#</a></h2><p>Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.</p><!----><h2 id="utility-classes-for-hiding-elements" tabindex="-1">Utility classes for hiding elements <a class="header-anchor" href="#utility-classes-for-hiding-elements" aria-hidden="true">#</a></h2><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><div class="language-js"><pre><code><span class="token keyword">import</span> <span class="token string">'element-plus/theme-chalk/display.css'</span>
|
|
</code></pre></div><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><h2 id="row-attributes" tabindex="-1">Row Attributes <a class="header-anchor" href="#row-attributes" aria-hidden="true">#</a></h2><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><h2 id="row-slots" tabindex="-1">Row Slots <a class="header-anchor" href="#row-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th><th>Subtags</th></tr></thead><tbody><tr><td>—</td><td>customize default content</td><td>Col</td></tr></tbody></table><h2 id="col-attributes" tabindex="-1">Col Attributes <a class="header-anchor" href="#col-attributes" aria-hidden="true">#</a></h2><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><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><h2 id="col-slots" tabindex="-1">Col Slots <a class="header-anchor" href="#col-slots" aria-hidden="true">#</a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>—</td><td>customize default content</td></tr></tbody></table></div></div><footer class="page-footer" data-v-d1dc05ac><div class="edit" data-v-d1dc05ac><div class="edit-link" data-v-d1dc05ac data-v-6ef31e8a><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/layout.md" target="_blank" rel="noopener noreferrer" data-v-6ef31e8a>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-6ef31e8a><!--[--><svg width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-6ef31e8a><path d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z" fill="currentColor"></path></svg><!--]--></i></a></div></div><div class="updated" data-v-d1dc05ac><p class="last-updated text-sm" data-v-d1dc05ac data-v-1caaffb8><span class="prefix" data-v-1caaffb8>Last Updated:</span><span class="datetime" data-v-1caaffb8></span></p></div></footer><div class="next-and-prev-link" data-v-74a5b853><div class="container" data-v-74a5b853><div class="prev" data-v-74a5b853><a class="link" href="/en-US/component/icon" data-v-74a5b853><i class="el-icon" style="" data-v-74a5b853><!--[--><svg class="icon" width="200" height="200" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-74a5b853><path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-74a5b853>Icon</span></a></div><div class="next" data-v-74a5b853><a class="link" href="/en-US/component/link" data-v-74a5b853><span class="text" data-v-74a5b853>Link</span><i class="el-icon" style="" data-v-74a5b853><!--[--><svg class="icon" width="200" height="200" viewbox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-74a5b853><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside ref_key="container" class="toc-wrapper"><nav class="toc-content"><h3 class="toc-content__heading">Contents</h3><ul class="toc-items"><!--[--><li class="toc-item"><a class="toc-link" href="#basic-layout">Basic layout</a><!----></li><li class="toc-item"><a class="toc-link" href="#column-spacing">Column spacing</a><!----></li><li class="toc-item"><a class="toc-link" href="#hybrid-layout">Hybrid layout</a><!----></li><li class="toc-item"><a class="toc-link" href="#column-offset">Column offset</a><!----></li><li class="toc-item"><a class="toc-link" href="#alignment">Alignment</a><!----></li><li class="toc-item"><a class="toc-link" href="#responsive-layout">Responsive Layout</a><!----></li><li class="toc-item"><a class="toc-link" href="#utility-classes-for-hiding-elements">Utility classes for hiding elements</a><!----></li><li class="toc-item"><a class="toc-link" href="#row-attributes">Row Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#row-slots">Row Slots</a><!----></li><li class="toc-item"><a class="toc-link" href="#col-attributes">Col Attributes</a><!----></li><li class="toc-item"><a class="toc-link" href="#col-slots">Col Slots</a><!----></li><!--]--></ul><div class="toc-marker"></div></nav></aside></div></main><!----></div></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ecad81eb\",\"en-us_component_alert.md\":\"6e56e95a\",\"en-us_component_avatar.md\":\"2310e0e1\",\"en-us_component_backtop.md\":\"06cb54b7\",\"en-us_component_badge.md\":\"8691fe8f\",\"en-us_component_border.md\":\"71fb09c0\",\"en-us_component_breadcrumb.md\":\"cba53d4b\",\"en-us_component_button.md\":\"0c3dd685\",\"en-us_component_calendar.md\":\"3c857c34\",\"en-us_component_card.md\":\"f2bf426a\",\"en-us_component_carousel.md\":\"7eaa63ed\",\"en-us_component_cascader.md\":\"a69370f2\",\"en-us_component_checkbox.md\":\"4cb07f6c\",\"en-us_component_collapse.md\":\"79bc2581\",\"en-us_component_color-picker.md\":\"886d6dde\",\"en-us_component_color.md\":\"f49f4ccf\",\"en-us_component_config-provider.md\":\"b2669f3b\",\"en-us_component_container.md\":\"efbbad10\",\"en-us_component_date-picker.md\":\"451f4538\",\"en-us_component_datetime-picker.md\":\"e3dc667b\",\"en-us_component_descriptions.md\":\"bcb2df0a\",\"en-us_component_dialog.md\":\"1225dba5\",\"en-us_component_divider.md\":\"18068dfe\",\"en-us_component_drawer.md\":\"20c3d258\",\"en-us_component_dropdown.md\":\"ccb4b9e1\",\"en-us_component_empty.md\":\"8a15bda5\",\"en-us_component_form.md\":\"7dd9b155\",\"en-us_component_icon.md\":\"8c2dba2e\",\"en-us_component_image.md\":\"5cea30d5\",\"en-us_component_infinite-scroll.md\":\"db8b35fe\",\"en-us_component_input-number.md\":\"cfbb9098\",\"en-us_component_input.md\":\"c4608d59\",\"en-us_component_layout.md\":\"7dde2ba0\",\"en-us_component_link.md\":\"074221ca\",\"en-us_component_loading.md\":\"3688965f\",\"en-us_component_menu.md\":\"12c6d963\",\"en-us_component_message-box.md\":\"9104f1e1\",\"en-us_component_message.md\":\"5154524d\",\"en-us_component_notification.md\":\"ccb1741a\",\"en-us_component_page-header.md\":\"1e77505f\",\"en-us_component_pagination.md\":\"549ec203\",\"en-us_component_popconfirm.md\":\"4698ae95\",\"en-us_component_popover.md\":\"f149cc1c\",\"en-us_component_progress.md\":\"9f0e976a\",\"en-us_component_radio.md\":\"aec1de43\",\"en-us_component_rate.md\":\"2237edb7\",\"en-us_component_result.md\":\"e780dc28\",\"en-us_component_scrollbar.md\":\"4ba5f4a8\",\"en-us_component_select-v2.md\":\"5df82cf7\",\"en-us_component_select.md\":\"a79dc324\",\"en-us_component_skeleton.md\":\"8128c705\",\"en-us_component_slider.md\":\"d3f7f87d\",\"en-us_component_space.md\":\"d5bbcce8\",\"en-us_component_steps.md\":\"43caa295\",\"en-us_component_switch.md\":\"0981682f\",\"en-us_component_table.md\":\"eb0d94ed\",\"en-us_component_tabs.md\":\"c0d7b006\",\"en-us_component_tag.md\":\"6de0ec39\",\"en-us_component_time-picker.md\":\"cba2d667\",\"en-us_component_time-select.md\":\"dd6dba2c\",\"en-us_component_timeline.md\":\"0d224521\",\"en-us_component_tooltip.md\":\"fb9f7470\",\"en-us_component_transfer.md\":\"79726620\",\"en-us_component_tree-v2.md\":\"546994c7\",\"en-us_component_tree.md\":\"196f6d07\",\"en-us_component_typography.md\":\"d26014ec\",\"en-us_component_upload.md\":\"e196c02d\",\"en-us_guide_changelog.md\":\"2d5705b6\",\"en-us_guide_design.md\":\"7d37acdb\",\"en-us_guide_i18n.md\":\"d1f4c556\",\"en-us_guide_installation.md\":\"cc1fceb7\",\"en-us_guide_migration.md\":\"1a564dfe\",\"en-us_guide_nav.md\":\"34a7fdc4\",\"en-us_guide_quickstart.md\":\"8195c09a\",\"en-us_guide_theming.md\":\"471b3770\",\"en-us_guide_transitions.md\":\"1d5e78de\",\"en-us_index.md\":\"5714a956\",\"en-us_resource_index.md\":\"f9b7668c\",\"index.md\":\"287a9614\",\"zh-cn_component_affix.md\":\"0d3dfff5\",\"zh-cn_component_alert.md\":\"50471103\",\"zh-cn_component_avatar.md\":\"066d75c3\",\"zh-cn_component_backtop.md\":\"1e9973d4\",\"zh-cn_component_badge.md\":\"ab6e4b58\",\"zh-cn_component_border.md\":\"b8726a2d\",\"zh-cn_component_breadcrumb.md\":\"aaf83fb0\",\"zh-cn_component_button.md\":\"69b8ee94\",\"zh-cn_component_calendar.md\":\"e23cbb3a\",\"zh-cn_component_card.md\":\"93cf342e\",\"zh-cn_component_carousel.md\":\"fcb4029f\",\"zh-cn_component_cascader.md\":\"034fbfd8\",\"zh-cn_component_checkbox.md\":\"b5473cbf\",\"zh-cn_component_collapse.md\":\"8a4bdc47\",\"zh-cn_component_color-picker.md\":\"df519724\",\"zh-cn_component_color.md\":\"232f07be\",\"zh-cn_component_config-provider.md\":\"b9b0c0ea\",\"zh-cn_component_container.md\":\"2ade56eb\",\"zh-cn_component_date-picker.md\":\"66c834c8\",\"zh-cn_component_datetime-picker.md\":\"e75196e2\",\"zh-cn_component_descriptions.md\":\"60275d43\",\"zh-cn_component_dialog.md\":\"979394b5\",\"zh-cn_component_divider.md\":\"a18e2a40\",\"zh-cn_component_drawer.md\":\"6bd1089d\",\"zh-cn_component_dropdown.md\":\"28e4669f\",\"zh-cn_component_empty.md\":\"b5ad79d9\",\"zh-cn_component_form.md\":\"20112067\",\"zh-cn_component_icon.md\":\"e289a489\",\"zh-cn_component_image.md\":\"8beec9c2\",\"zh-cn_component_infinite-scroll.md\":\"b0ec9b61\",\"zh-cn_component_input-number.md\":\"612517d7\",\"zh-cn_component_input.md\":\"fb5737c7\",\"zh-cn_component_layout.md\":\"3ec5f933\",\"zh-cn_component_link.md\":\"7fdcaae3\",\"zh-cn_component_loading.md\":\"b85e33f7\",\"zh-cn_component_menu.md\":\"ea7101ce\",\"zh-cn_component_message-box.md\":\"7297e17a\",\"zh-cn_component_message.md\":\"19b7e638\",\"zh-cn_component_notification.md\":\"cb44082e\",\"zh-cn_component_page-header.md\":\"66ab1135\",\"zh-cn_component_pagination.md\":\"030270c2\",\"zh-cn_component_popconfirm.md\":\"66b353a3\",\"zh-cn_component_popover.md\":\"a98d2b2e\",\"zh-cn_component_progress.md\":\"b4b4188d\",\"zh-cn_component_radio.md\":\"a8414e44\",\"zh-cn_component_rate.md\":\"b998fc84\",\"zh-cn_component_result.md\":\"c1515ac3\",\"zh-cn_component_scrollbar.md\":\"5d30dcd5\",\"zh-cn_component_select-v2.md\":\"9c914158\",\"zh-cn_component_select.md\":\"f973802a\",\"zh-cn_component_skeleton.md\":\"814fa087\",\"zh-cn_component_slider.md\":\"9c3b9bdf\",\"zh-cn_component_space.md\":\"01a4706d\",\"zh-cn_component_steps.md\":\"d29d6c66\",\"zh-cn_component_switch.md\":\"6a6cc7db\",\"zh-cn_component_table.md\":\"67f28fa8\",\"zh-cn_component_tabs.md\":\"c0e6c8f4\",\"zh-cn_component_tag.md\":\"3760fbd0\",\"zh-cn_component_time-picker.md\":\"572efa0b\",\"zh-cn_component_time-select.md\":\"8e014981\",\"zh-cn_component_timeline.md\":\"ed4c1468\",\"zh-cn_component_tooltip.md\":\"31c41e39\",\"zh-cn_component_transfer.md\":\"14a20a5c\",\"zh-cn_component_tree-v2.md\":\"dc65b1f5\",\"zh-cn_component_tree.md\":\"c7810ea7\",\"zh-cn_component_typography.md\":\"e6b0e4e9\",\"zh-cn_component_upload.md\":\"0e6df4c7\",\"zh-cn_guide_changelog.md\":\"fcc675c0\",\"zh-cn_guide_design.md\":\"94b4bbc7\",\"zh-cn_guide_i18n.md\":\"581cfcaa\",\"zh-cn_guide_installation.md\":\"16b29e8b\",\"zh-cn_guide_migration.md\":\"28ec9d4c\",\"zh-cn_guide_nav.md\":\"531cf726\",\"zh-cn_guide_quickstart.md\":\"93adbb44\",\"zh-cn_guide_theming.md\":\"b4bdd782\",\"zh-cn_guide_transitions.md\":\"7e8604ca\",\"zh-cn_index.md\":\"f9ac086e\",\"zh-cn_resource_index.md\":\"d1730222\"}")</script>
|
|
<script type="module" async src="/assets/app.7235fb74.js"></script>
|
|
|
|
</body>
|
|
</html> |