底部工具栏被顶起是因为grid容器未占满视口且工具栏参与行轨道分配；应设min-height: 100vh、grid-template-rows: 1fr auto（或minmax(0,1fr) auto），并确保工具栏位于第二行。
底部工具栏用 grid 实现固定定位时，为什么总被内容顶起来？
因为 grid 容器本身不自动撑满视口高度，底部工具栏又没脱离文档流——它默认参与 grid 行轨道分配，一旦内容少，就会上浮。解决核心是：让容器占满视口，且把工具栏锁定在最后一行轨道的底边。
- 给父容器设
height: 100vh或min-height: 100vh（推荐后者，兼容内容超长场景） - 用
display: grid+grid-template-rows: 1fr auto，其中1fr吃掉剩余空间，auto只包住工具栏自身高度 - 确保工具栏元素放在 grid 的最后一行（比如用
grid-row: 2或直接按顺序写在模板末尾）
grid-template-rows 用 1fr 还是 minmax(0, 1fr)？
多数情况用 1fr 就够；但当工具栏里有 flex 或 grid 子项、或内容动态折叠时，1fr 可能因内部最小尺寸限制而撑大容器，导致滚动条异常。这时要加 minmax(0, 1fr) 来允许收缩到零。
-
1fr等价于minmax(min-content, 1fr)，会尊重子项的min-width/min-height -
minmax(0, 1fr)强制允许压缩，适合工具栏内含可折叠菜单、动态图标组等场景 - Chrome/Firefox 支持良好，Safari 14.1+ 也无问题，老 Safari（
响应式断点下工具栏从横排变竖排，grid-template-columns 怎么切？
别只改列数，要配合 grid-auto-flow 和子项的 grid-column 控制流向。横排是单行多列，竖排本质是单列多行，靠媒体查询切换模板更稳。
- 横排（桌面）：
grid-template-columns: repeat(4, 1fr)+grid-auto-flow: column - 竖排（手机）：
grid-template-columns: 1fr+grid-auto-flow: row - 每个按钮用
grid-column: 1（竖排时强制占整列），避免换行错位 - 注意：
gap值也要响应式调整，竖排时gap: 0.5rem比1rem更紧凑
工具栏固定在视口底部但要避开系统导航栏（iOS/Android），怎么处理？
CSS env(safe-area-inset-bottom) 是唯一可靠方案。单纯用 padding-bottom 或 margin-bottom 会误判非刘海屏设备，且无法适配 Android 虚拟导航键高度变化。
立即学习“前端免费学习笔记（深入）”；
- 给工具栏容器加
padding-bottom: env(safe-area-inset-bottom) - 同时设
margin-bottom: calc(-1 * env(safe-area-inset-bottom))抵消 padding 导致的额外高度（否则工具栏上移） - 为防不支持
env()的旧浏览器，用@supports (padding-bottom: env(safe-area-inset-bottom))包裹 - 测试时务必真机调试：iOS 模拟器开「Device → Face ID」，Android 开启「Navigation bar」模拟
最易忽略的是：工具栏内部按钮的点击热区必须延伸到安全区边缘，否则手指点不到——这得靠 height 和 padding 配合 env() 往下撑，不能只靠外层容器留白。
