插槽负责内容分发，CSS Grid/Flex 实现栅格布局；通过具名插槽划分语义区域（header/sidebar/main/aside/footer），配合 grid-template-areas、minmax()/fr 单位及媒体查询实现动态响应式网格，支持运行时 layoutMode 驱动的布局切换与过渡动画。
插槽本身不直接实现栅格排列，它负责内容分发；真正完成自由栅格化布局的是 CSS（Grid 或 Flex），插槽只是把内容精准“送”到对应区域。关键在于：父组件用插槽定义可插入点，子组件用 CSS 控制这些区域的尺寸、顺序与响应行为。
用具名插槽划分逻辑区域
先在布局组件中按功能切分结构，而不是按固定列数。例如支持 header / sidebar / main / aside / footer 五个具名插槽：
- 每个插槽代表一个语义化区域，不绑定具体宽度或位置
- 外部使用时可只传入需要的部分（比如移动端隐藏 sidebar）
- 避免用 left/right 这类视觉命名，改用 sidebar/main 更利于后期调整
用 CSS Grid 实现动态栅格控制
在布局组件样式中，用 grid-template-areas 配合 grid-area 把插槽内容映射到网格区域：
- 定义基础网格模板：
grid-template-areas: "header header" "sidebar main" "footer footer"; - 为每个插槽设置对应区域：
> [name="header"] { grid-area: header; } - 用
minmax()和fr单位让列宽弹性伸缩，比如 sidebar 固定 240px，main 占满剩余空间
用媒体查询驱动响应式断点
不同屏幕尺寸下，改变的是网格结构本身，而非仅隐藏/显示元素：
- 桌面端：三栏（sidebar + main + aside）→
"header header header" "sidebar main aside" "footer footer footer" - 平板端：两栏（header + main + footer），aside 移至 main 下方 →
"header header" "main main" "aside aside" "footer footer" - 手机端：单栏堆叠 →
"header" "main" "sidebar" "footer"，此时 sidebar 实际作为折叠菜单存在
支持运行时布局切换
结合 Vue 的响应式能力，让布局结构可被数据驱动：
- 定义 layoutMode 响应式变量（如 'sidebar-left' / 'sidebar-right' / 'no-sidebar'）
- 用
:class或内联 style 动态切换grid-template-areas值 - 配合 transition 实现区域展开/收起的平滑动画（注意：Grid 本身不支持过渡，需用 transform 或 max-height 模拟）
