用途
该技能聚焦于 Material UI（MUI）的布局组件与响应式设计模式，帮助开发者在 MUI 项目中组织页面结构、实现跨断点自适应布局。内容覆盖 MUI v6 的 Grid v2、Stack、Container、Box 等布局组件，以及断点体系与常见页面布局方案。
主要能力
Grid v2
MUI v6 默认使用 Grid v2（从 @mui/material/Grid 导入）。其 size 属性替代旧的 xs/sm/md 等属性，内部始终使用 CSS grid，并且不再需要 item 属性——容器的每个直接子元素都是网格项。
- 固定列宽：
<Grid size={6} /> - 响应式列宽：
<Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} /> size="auto"：收缩到内容宽度size="grow"：填充剩余空间（等价于旧的 xs="true"）
间距与偏移：支持统一 spacing、分开的 columnSpacing/rowSpacing、响应式 spacing 对象，以及 offset（含响应式 offset）和嵌套网格。
Stack
Stack 是一维布局组件（flexbox 行或列），适合线性排列的组件序列。支持响应式 direction、spacing、alignItems，可通过 divider 在项之间插入分隔线。默认使用负外边距模拟间距；当子元素或容器具有 overflow: hidden 时，应设置 useFlexGap 改用 CSS gap 属性。
Container
Container 通过 maxWidth 实现内容水平居中并限制最大宽度，是页面内容的主要布局包装器。支持响应式 maxWidth（如 lg 默认 1200px、sm 默认 600px）、maxWidth={false} 全宽流式、fixed 在各断点间跳变。
Box
Box 默认渲染为 div，可通过 component 属性改变元素类型，支持完整 sx 属性与系统简写。可用于 flex 居中、区块间距、滚动容器等场景。
断点与 useMediaQuery
默认断点（px）：xs 0、sm 600、md 900、lg 1200、xl 1536。断点辅助函数包括 up、down、between、only。useMediaQuery 钩子可在组件中判断当前断点，支持 defaultMatches 与 noSsr 选项以配合 SSR。
使用方式
内容以可复制的代码示例形式给出，开发者可直接参考示例在 MUI 项目中编写布局代码。示例涵盖：
- 基础 Grid、间距、偏移、嵌套网格
- Stack 的垂直/水平/响应式用法与分隔线
- Container 的多种 maxWidth 配置
- Box 作为布局基础组件
- useMediaQuery 与断点辅助函数
- 常见布局模式与进阶布局模式
适用场景
- 构建 MUI 应用的页面骨架（应用外壳、侧边栏加主内容）
- 仪表盘类界面的卡片网格与统计行布局
- 认证页等居中表单布局
- 瀑布流（Masonry）布局
- 响应式 AppBar 与 Drawer 组合布局、迷你变体侧栏、粘性头部加可滚动内容
- 通过 useMediaQuery 或 sx 断点对象实现按屏幕尺寸切换显示
限制
资料未提供该技能的安装方式、收费信息、支持平台、版本兼容要求或性能表现等具体说明。Masonry 布局来自 @mui/lab，资料未说明其稳定性或长期支持情况。Grid v2 的 size 属性写法针对 MUI v6，旧版本行为未在资料中说明。