底部多功能面板需用 fixed 定位+flex 推底，内容区用 grid-template-rows: max-content 1fr + max-height 限高，菜单网格用 auto-fit 自适应列，隐藏项必须用 display: none。
在 H5 中实现移动端底部多功能面板（如常用操作弹窗、工具栏）的网格布局，核心是“定位 + 内容网格化 + 自适应列 + 安全隐藏”，不能把 display: grid 直接套在弹窗外层容器上，否则在 iOS Safari 和部分 Android WebView 中会出现遮罩错位、内容塌陷或无法上推的问题。
底部面板必须用 fixed 定位，内部再用 Grid 划分内容
整个面板（例如 .bottom-sheet）需满足：
- position: fixed; inset: 0; —— 锚定视口，确保不随页面滚动偏移
- display: flex; flex-direction: column; justify-content: flex-end; —— 把面板整体推到底部，这是 iOS/Android 兼容性最稳的方式
- 内部真正承载菜单项的容器（如
.sheet-content）才设display: grid
内容区用两行 Grid：顶部栏 + 可滚动菜单区
在 .sheet-content 上配置：
- grid-template-rows: max-content 1fr; —— 首行容纳标题/关闭按钮（高度自适应），次行占满剩余空间
-
max-height: 70vh; overflow: hidden; —— 给
1fr提供明确计算边界，防止长菜单撑爆屏幕 -
菜单列表容器（如
.menu-grid）加overflow-y: auto; min-height: 0;—— 否则 Grid 子项默认最小尺寸会阻止滚动生效
功能图标网格用 auto-fit 实现列数自适应
菜单项容器（.menu-grid）设：
- grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) —— 小屏单列、中屏双列、大屏三列，避免文字被压扁
- 子项（每个图标+文字组合）设
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px;—— 解决 baseline 对齐错位，同时满足触控安全区 - 图片或图标统一用
width: 24px; height: 24px;，文字用font-size: 12px;，上下间距用gap: 4px;
动态隐藏菜单项必须用 display: none
权限控制或设备适配时（如小屏隐藏“扫描”“文件”等入口）：
- 只能用
display: none;—— 这是唯一能让 Grid 自动重排轨道、保持1fr区域完整分配的方式 - 禁用
visibility: hidden或opacity: 0—— 它们仍占据轨道位置，会导致滚动失效、按钮错位或高度塌缩 - 不建议在媒体查询里改写
grid-template-rows或把1fr替换为固定值，会破坏响应稳定性
