TinyVue Layout栅格完全指南：告别手写float和flex
TinyVue Layout 组件完全指南：别再手写 float 和 flex 了，栅格早该这样用 前端布局的痛点，资深开发者都深有体会。如果从业超过三年，大概率经历过以下阶段： 早期阶段， 布局占据主导。页面嵌套多层表格，修改一个单元格宽度，整个布局便会崩溃。调试过程令人沮丧。 中期阶段，floa
TinyVue Layout 组件完全指南：别再手写 float 和 flex 了，栅格早该这样用
前端布局的痛点，资深开发者都深有体会。如果从业超过三年，大概率经历过以下阶段：
早期阶段， 中期阶段， 后续阶段，Flexbox 布局出现。虽然解决了 栅格布局的出现，提供了更高效的方案。 栅格系统的核心原理清晰：将页面横向等分为 N 份，每列占据若干份。12 栅格下，"三栏布局"对应 3+6+6+3，"左右两栏"对应 8+4。无需手动计算像素、编写 TinyVue 的 Layout 组件，将这一理念实现到极致。它由三个子组件构成—— Layout 组件采用经典的三层嵌套结构： 布局结构 = Layout 包含 Row，Row 包含 Col。 牢记此嵌套顺序后，只需为 Col 设置 TinyVue 的 自动换行功能实用：当一行内所有 常用 无需使用 Layout 组件的核心优势在于响应式。 配置解读（总栅格 12）： 一套模板，五种尺寸自动适配，无需编写 media query。 在 当子项高度不同时， 栅格系统中，列间距的处理常涉及负 margin 和溢出问题。TinyVue 的 当需要完全消除间距时（例如平铺图片墙）， 当需要在行内留出空白区域时， 当需要不同角色看到不同列顺序，但不想改变模板结构时，可使用 此功能在后台管理系统中尤为实用——不同角色的用户看到不同的列顺序，仅需调整 默认情况下， 三个组件均支持 结合所有特性，构建一个响应式仪表盘示例： 手机端：四个卡片竖排两两一行（xs=6）；桌面端：横向四个一排。一套代码适配所有尺寸。 Layout 组件本质上完成两件事： 将布局从手动编写 CSS 转换为配置数字。无需书写 将响应式从多套 CSS 转换为一套配置。 Layout + Container 构成完整的 TinyVue 布局方案。Container 管理页面级骨架（header/aside/main/footer），Layout 管理内容区的栅格排版。两者配合，实现从页面结构到内容排列的全链路覆盖。 下次遇到布局需求，直接使用 Layout + Row + Col，配置数字即可。 布局占据主导。页面嵌套多层表格，修改一个单元格宽度，整个布局便会崩溃。调试过程令人沮丧。
float 布局成为主流。float: left、clear: both 等属性频繁使用，但浮动元素常出现错位，父元素高度塌陷，维护成本较高。float 的部分问题，但 justify-content: space-between 和 align-items: center 等属性需要重复书写，效率有待提升。calc 或百分比。Layout（容器）、Row（行）、Col（列），三者协同，将布局过程简化为配置数字。
1. 三剑客：Layout、Row、Col
组件 角色 比喻 TinyLayout栅格容器 棋盘 TinyRow行 棋盘上的一行 TinyCol列 一行中的某个格子 span 属性即可。
2. 12 栅格与 24 栅格：粗细粒度选择
Layout 组件提供 cols 属性，用于设定总栅格数：
cols 值适用场景 12（默认）常规页面布局，2/3/4 等分方便 24需要更细粒度控制，例如五等分、七等分 Col 的 span 总和超过总栅格数时，超出部分自动换行。无需手动在 v-for 中嵌套 v-if 判断分行逻辑：
3. Span：栅格的核心属性
span 是 Col 组件的核心属性，决定当前列占据的栅格数。数值越大，列宽越大。span 组合速查表：布局模式 span 组合 视觉效果 两栏等分 6 + 6 □□ 三栏等分 4 + 4 + 4 □□□ 左窄右宽 3 + 9 □ 左宽右窄 8 + 4 □ 四等分 3 + 3 + 3 + 3 □□□□ width: 25% 或 flex: 1，配置数字即可。
4. 响应式布局：一套代码适配多端
Col 组件预设五个响应式断点，通过属性即可实现多端适配：属性 断点 触发条件 xs< 768px 手机竖屏 sm< 992px 手机横屏 / 小平板 md< 1200px 平板 / 小笔记本 lg< 1920px 标准桌面 xl>= 1920px 大屏 / 超宽显示器
3 × 4 = 12
5. Flex 对齐：比 CSS 更直观
Row 上设置 :flex="true" 后，可通过 justify 和 align 控制子项对齐方式。5.1 主轴对齐（justify）
justify 可选值：值 效果 start（默认）左对齐 center居中 end右对齐 space-between两端对齐，中间平均分布 space-around每个子项两侧间距相等 5.2 副轴对齐（align）
align 属性用于控制垂直对齐：值 效果 top（默认）顶部对齐 middle垂直居中 bottom底部对齐
6. Gutter 间距与 NoSpace：简化列间距
gutter 属性直接解决这一痛点。gutter 表示相邻两列之间的间距（单位 px），组件自动为每列添加 padding-left 和 padding-right 各一半。首尾列左右边缘无额外 padding 溢出——Row 内部已通过负 margin 自动处理。NoSpace：彻底清除间距
noSpace 属性比 gutter="0" 更彻底：
7. Offset 偏移：利用留白布局
offset 属性可实现偏移效果。offset 通过 margin-left 实现，而 move 属性通过 left 定位实现。一般场景使用 offset 即可，move 作为备选方案。
8. Col 排序：不修改模板顺序
Row 的 order 属性和 Col 的 no 属性。order 取值规则：
asc：按 no 值升序排列（数字小的靠前）desc：按 no 值降序排列（数字大的靠前）no 值，无需修改模板。
9. Tag 自定义标签：支持语义化 HTML
Layout、Row、Col 渲染为 tag 属性可自定义为其他 HTML 标签，提升语义化：
tag 属性，适用于需要无障碍访问或 SEO 优化的页面。
10. 实战：后台管理仪表盘
12,845
3,250
467
85,200
总结：Layout 的核心理念
特性 说明 基础栅格 cols 设定总数，span 设定占位响应式 xs/sm/md/lg/xl 五个断点自适应Flex 对齐 justify + align，语义清晰间距 gutter 自动处理 padding，无需手动编写偏移 offset 实现居中或留白排序 order 不修改模板即可重排顺序自定义标签 tag 支持语义化 HTML
display: flex; justify-content: space-between; width: calc(33.33% - 20px)，仅需配置 span 和 gutter。xs/sm/md/lg/xl 五个属性覆盖所有媒体查询需求。