Element Plus Layout 布局组件完全指南24 栅格系统、响应式断点与实用隐藏类【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus本指南以 Element Plus 官方文档 docs/en-US/component/layout.md 为主体骨架结合仓库中 Row 组件源码、Col 组件源码 及 布局单元测试 展开讲解。读者将掌握基于 24 列栅格快速搭建页面骨架的方法理解gutter间距的底层实现原理并能独立使用响应式断点xs/sm/md/lg/xl与hidden-*工具类完成多端适配。一、栅格体系核心概念Element Plus 的 Layout 布局组件由Row行与Col列两个组件构成基于24 等分栅格设计每一行在水平方向被均分为 24 份列通过span属性声明自己占据的份数。其设计要点如下默认采用 Flex 布局无需手动设置typeflex横向排布与对齐由 CSS Flexbox 天然承担列的计量单位为 1 份最小 0、最大 24span取值范围为0 ~ 24注意父容器应避免使用inline相关样式如display: inline否则会导致组件无法撑满自身宽度。下面进入具体使用场景所有示例均可在 docs/examples/layout 目录下找到完整源码。二、基础布局用span划分列宽创建基础栅格布局只需在el-row内放置多个el-col并通过:span指定每列占用的份数。以下示例完整展示了从单列到六列的常见分法源码见 docs/examples/layout/basic-layout.vueel-row el-col :span24 div classgrid-content ep-bg-purple-dark / /el-col /el-row el-row el-col :span12 div classgrid-content ep-bg-purple / /el-col el-col :span12 div classgrid-content ep-bg-purple-light / /el-col /el-row el-row el-col :span8 div classgrid-content ep-bg-purple / /el-col el-col :span8 div classgrid-content ep-bg-purple-light / /el-col el-col :span8 div classgrid-content ep-bg-purple / /el-col /el-row el-row el-col :span6 div classgrid-content ep-bg-purple / /el-col el-col :span6 div classgrid-content ep-bg-purple-light / /el-col el-col :span6 div classgrid-content ep-bg-purple / /el-col el-col :span6 div classgrid-content ep-bg-purple-light / /el-col /el-row el-row el-col :span4 div classgrid-content ep-bg-purple / /el-col el-col :span4 div classgrid-content ep-bg-purple-light / /el-col el-col :span4 div classgrid-content ep-bg-purple / /el-col el-col :span4 div classgrid-content ep-bg-purple-light / /el-col el-col :span4 div classgrid-content ep-bg-purple / /el-col el-col :span4 div classgrid-content ep-bg-purple-light / /el-col /el-row可见同一行内各列span之和为 24时恰好铺满一行不足 24 时右侧留白超过 24 时换行。示例中使用的ep-bg-purple等背景类来自 docs/examples/layout/index.scss其中通过 CSS 变量--ep-c-bg-purple等定义配色并在.dark作用域下提供暗色变量使演示在不同主题下均清晰可辨。三、列间距gutter的用法与实现原理行组件通过gutter属性指定列与列之间的间隔默认值为 0。当gutter大于 0 时各列左右两侧各获得gutter / 2的内边距从而在视觉上形成均匀的沟槽源码见 docs/examples/layout/column-spacing.vueel-row :gutter20 el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row从源码层面看gutter的传递与计算是一条完整的 provide/inject 链路Row 通过provide下发间距row.vue 中将计算属性gutter包装为rowContextKey上下文并提供给后代组件Row 计算负外边距抵消内边距同一文件第 32-40 行当gutter非 0 时Row 的marginLeft与marginRight被设置为-${gutter / 2}px。这正是为了保证第一列与最后一列不因列的内边距而向外溢出使整体宽度仍然与容器对齐Col 注入并生成内边距col.vue 通过inject读取gutter为列设置paddingLeft paddingRight gutter / 2px类名标记col.vue 第 71-74 行当存在 gutter 时额外追加is-guttered修饰类。这一实现细节在单元测试 packages/components/col/tests/layout.test.tsx 中得到精确验证Row gutter{20}时行元素marginLeft/marginRight为-10px、列元素paddingLeft/paddingRight为10px当gutter由 20 动态改为 40 后行负外边距与列内边距同步变为-20px / 20px证明间距支持响应式更新。四、混合布局自由组合列宽将基础的 1/24 列进行任意组合即可拼出复杂但不失规整的页面骨架源码见 docs/examples/layout/hybrid-layout.vueel-row :gutter20 el-col :span16div classgrid-content ep-bg-purple //el-col el-col :span8div classgrid-content ep-bg-purple //el-col /el-row el-row :gutter20 el-col :span8div classgrid-content ep-bg-purple //el-col el-col :span8div classgrid-content ep-bg-purple //el-col el-col :span4div classgrid-content ep-bg-purple //el-col el-col :span4div classgrid-content ep-bg-purple //el-col /el-row el-row :gutter20 el-col :span4div classgrid-content ep-bg-purple //el-col el-col :span16div classgrid-content ep-bg-purple //el-col el-col :span4div classgrid-content ep-bg-purple //el-col /el-row典型的「16 8」「8 8 4 4」「4 16 4」组合分别对应内容区 侧栏、四列信息卡、双侧栏等常见版式适合作为页面头部、中部、尾部的栅格模板。五、列偏移与位移offset/push/pulloffset从左侧空出若干份通过el-col的offset属性可以指定列左侧空出的份数源码见 docs/examples/layout/column-offset.vueel-row :gutter20 el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6 :offset6 div classgrid-content ep-bg-purple / /el-col /el-row el-row :gutter20 el-col :span6 :offset6 div classgrid-content ep-bg-purple / /el-col el-col :span6 :offset6 div classgrid-content ep-bg-purple / /el-col /el-row el-row :gutter20 el-col :span12 :offset6 div classgrid-content ep-bg-purple / /el-col /el-rowoffset同样以「份」为单位span6且offset6表示该列占 6 份且左侧再空出 6 份。三个示例分别演示了错位双列、对称缩进双列与居中单列6 12 6 24三种布局。push / pull相对位移除offset外Col 还提供push向右移动 N 份与pull向左移动 N 份常用于在不调整 DOM 顺序的前提下重新排列列序对 SEO 或特殊交互顺序有实际价值。从 col.ts 的类型定义看push描述为「number of columns that grid moves to the right」pull描述为「number of columns that grid moves to the left」三者默认值均为 0。六、对齐方式justify与alignRow 默认即 Flex 布局因此可以借助justify与align对子元素进行灵活对齐源码见 docs/examples/layout/alignment.vue。justify水平方向对齐justify支持六个枚举值完整示例el-row classrow-bg el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row el-row classrow-bg justifycenter el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row el-row classrow-bg justifyend el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row el-row classrow-bg justifyspace-between el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row el-row classrow-bg justifyspace-around el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-row el-row classrow-bg justifyspace-evenly el-col :span6div classgrid-content ep-bg-purple //el-col el-col :span6div classgrid-content ep-bg-purple-light //el-col el-col :span6div classgrid-content ep-bg-purple //el-col /el-rowalign垂直方向对齐align支持top、middle、bottom三个值作用于垂直方向。需要说明的是若 Row 只有一行且高度由其子元素撑起垂直对齐的效果不会显现通常需要在父容器给出行高约束或配合栅格内高度不同的内容观察差异。这两个属性的合法取值定义在 row.ts 的RowJustify与RowAlign常量中且justify默认值为start、align默认无值不应用。在 row.vue 中二者会被编译为修饰类justify非默认时追加is-justify-${justify}align存在时追加is-align-${align}。对应测试见 layout.test.tsx。七、响应式布局xs / sm / md / lg / xl 五档断点响应式设计参考了 Bootstrap 的思路预设五个断点xs、sm、md、lg、xl。每个断点对应一个浏览器视口宽度阈值定义于 packages/theme-chalk/src/common/var.scss断点视口宽度说明xs 768px超小屏手机sm≥ 768px小屏平板竖屏md≥ 992px中屏平板横屏/笔记本lg≥ 1200px大屏桌面xl≥ 1920px超大屏响应式用法在每个断点下可以为 Col 指定数字等价于该断点下的span或对象包含span、offset、pull、push的任意组合。官方示例docs/examples/layout/responsive-layout.vueel-row :gutter10 el-col :xs8 :sm6 :md4 :lg3 :xl1 div classgrid-content ep-bg-purple / /el-col el-col :xs4 :sm6 :md8 :lg9 :xl11 div classgrid-content ep-bg-purple-light / /el-col el-col :xs4 :sm6 :md8 :lg9 :xl11 div classgrid-content ep-bg-purple / /el-col el-col :xs8 :sm6 :md4 :lg3 :xl1 div classgrid-content ep-bg-purple-light / /el-col /el-row该示例中每个断点下四列的 span 依次为xs 下8/4/4/8、sm 下6/6/6/6、md 下4/8/8/4、lg 下3/9/9/3、xl 下1/11/11/1直观体现了同一栅格在不同屏幕宽度下的形态切换。对象写法与类名生成断点属性同样支持对象形式例如el-col :sm{ span: 4, offset: 2 } :md8 :lg{ span: 6, offset: 3 } /从 col.vue 的类名生成逻辑可以看出当断点值为数字时生成el-col-{size}-{n}类当值为对象时遍历其span/offset/pull/push键span生成el-col-{size}-{n}其余键生成el-col-{size}-{prop}-{n}。对应断言见 layout.test.tsx例如sm{{ span: 4, offset: 2 }}会产出el-col-sm-4与el-col-sm-offset-2两个类。最终的断点生效则依赖 theme-chalk 中按媒体查询生成的 col.scss 样式。八、隐藏元素工具类hidden-*系列除栅格外Layout 还提供一组按视口条件隐藏元素的工具类可添加到任意 DOM 元素或自定义组件上。使用前需先引入对应的 CSS 文件import element-plus/theme-chalk/display.css可用的类及其含义如下完整清单见 docs/en-US/component/layout.mdhidden-xs-only— 仅在超小屏时隐藏hidden-sm-only— 仅在小屏时隐藏hidden-sm-and-down— 在小屏及以下时隐藏hidden-sm-and-up— 在小屏及以上时隐藏hidden-md-only— 仅在中屏时隐藏hidden-md-and-down— 在中屏及以下时隐藏hidden-md-and-up— 在中屏及以上时隐藏hidden-lg-only— 仅在大屏时隐藏hidden-lg-and-down— 在大屏及以下时隐藏hidden-lg-and-up— 在大屏及以上时隐藏hidden-xl-only— 仅在超大屏时隐藏这些类名与媒体查询的对应关系定义在 theme-chalk 的 display.scss 中它遍历$breakpoints-spec映射为每个hidden-{key}类生成对应的媒体查询并在命中时应用display: none !important。$breakpoints-spec的完整定义见 var.scss例如xs-only→(max-width: 767px)sm-and-up→(min-width: 768px)sm-only→(min-width: 768px) and (max-width: 991px)sm-and-down→(max-width: 991px)md-and-up→(min-width: 992px)lg-only→(min-width: 1200px) and (max-width: 1919px)xl-only→(min-width: 1920px)由此可知*-and-up与*-and-down两套方向性工具类足以覆盖「从某档往上/往下」的所有适配诉求与栅格的五档断点完全同源可放心组合使用。九、Row API 参考Row Attributesrow.ts 定义名称说明类型默认值gutter栅格间距^[number]0justifyflex 布局的水平对齐方式^[enum]start \| end \| center \| space-around \| space-between \| space-evenlystartalignflex 布局的垂直对齐方式^[enum]top \| middle \| bottom—tag自定义元素标签^[string]divRow Slots名称说明子组件default自定义默认内容Col十、Col API 参考Col Attributescol.ts 定义名称说明类型默认值span栅格占据的列数^[number]24offset栅格左侧的间隔列数^[number]0push栅格向右移动的列数^[number]0pull栅格向左移动的列数^[number]0xs768px响应式列数或列属性对象^[number] / ^[object]{span?: number, offset?: number, pull?: number, push?: number}—sm≥768px响应式列数或列属性对象^[number] / ^[object]{span?: number, offset?: number, pull?: number, push?: number}—md≥992px响应式列数或列属性对象^[number] / ^[object]{span?: number, offset?: number, pull?: number, push?: number}—lg≥1200px响应式列数或列属性对象^[number] / ^[object]{span?: number, offset?: number, pull?: number, push?: number}—xl≥1920px响应式列数或列属性对象^[number] / ^[object]{span?: number, offset?: number, pull?: number, push?: number}—tag自定义元素标签^[string]div响应式对象的类型别名ColSizeObject与ColSize同样定义于 col.tsColSize number | ColSizeObject。Col Slots名称说明default自定义默认内容十一、源码级总结栅格如何工作把整条链路串起来Element Plus Layout 的工作机制可以概括为三步类名即样式Col 的所有栅格行为占位、偏移、位移、响应式最终都编译为el-col-*系列类名见 col.vue由 col.scss 中的宽度百分比与媒体查询驱动上下文即间距Row 通过provide(rowContextKey, { gutter })下发间距Col 通过inject消费并转为内边距Row 自身以负外边距抵消形成「负边距 内边距」的标准栅格沟槽方案见 row.vue动态即响应gutter与各响应式断点均基于 Vue 响应式计算属性修改后类名与内联样式即时重算测试 layout.test.tsx 对类名生成、间距数值与响应式对象的断言即为这一结论的直接证据。掌握上述机制后无论是搭建固定版式还是为移动端/桌面端分别定制栅格都能基于同一套 24 列体系快速完成并可随时借助hidden-*工具类做元素的按屏显隐控制。【免费下载链接】element-plus A Vue.js 3 UI Library made by Element team项目地址: https://gitcode.com/GitHub_Trending/el/element-plus创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考