优先用 grid-column 和 grid-row 手动控制每个格子的起止线；grid-template-areas 仅适用于语义固定、命名稳定的布局场景。
用 CSS Grid 实现不规则格子布局的关键是 grid-template-areas 还是 grid-column/grid-row？
直接说结论：优先用 grid-column 和 grid-row 手动控制每个格子的起止线，别硬套 grid-template-areas。后者只适合语义清晰、区域固定且命名不频繁变动的场景；手机控制中心那种按钮大小不一、排列随状态变化的布局，用命名区域反而难维护、易冲突。
常见错误是先画个 6×6 网格再填 "a a b b . ." "a a b b . ." ...，结果发现亮度滑块要跨 3 行、Wi-Fi 开关要窄高、夜间模式图标又得居中缩放——名字很快不够用，. 多得眼花，改一个区域全得重排。
-
grid-column: 1 / 3表示从第 1 线到第 3 线（占 2 列），不是“从第 1 列到第 3 列” - 行号默认从上到下递增，但 iOS 控制中心底部常有固定高度工具栏，建议用
grid-template-rows: 1fr min-content分离主内容区和底栏 - 所有格子必须显式声明
grid-column或grid-row，否则会按源顺序自动填充，破坏不规则感
如何让“大按钮”（如手电筒）真正占据视觉重心而不撑开网格？
单纯设 grid-column: 1 / -1 拉满整行，容易让下面的格子被挤到下一行，尤其在小屏上。关键在控制「轨道尺寸」和「内容行为」分离。
- 用
grid-template-columns: repeat(4, 1fr)定义等宽列，再让大按钮grid-column: 1 / -1——它占满，但列轨道不变，后续项仍对齐原列线 - 按钮内部用
display: flex; justify-content: center; align-items: center居中图标，别依赖width: 100%，否则圆角或阴影会被截 - 避免给大按钮设
height，改用min-height+aspect-ratio: 1保正方，适配不同屏幕密度
滑块类控件（亮度/音量）为什么总对不齐、拖动区域太小？
滑块不是装饰，是可交互元素，CSS 布局必须配合语义结构。纯用 div + background 模拟滑块，会丢失 <input type="range"> 的原生可访问性和触摸响应区域。
立即学习“前端免费学习笔记（深入）”；
- 把
<input type="range">放进格子，用grid-column: 2 / 4控制宽度，再用appearance: none清空默认样式 - 通过
::-webkit-slider-thumb和::-moz-range-thumb单独调 thumb 大小，width: 24px; height: 24px是触摸最小安全尺寸 - 不要用
transform: scale()缩放整个 input，会导致点击热区错位；改用padding扩展 track 区域 - 安卓 WebView 对
input[type="range"]的background渐变支持弱，优先用伪元素叠加实现
为什么 iPhone 控制中心能“无缝”适配刘海屏和小屏，而你的布局总在底部留白或溢出？
核心不是媒体查询，而是容器的「锚定逻辑」。iOS 控制中心实际是贴着安全区底部（env(safe-area-inset-bottom)），且主网格高度由内容撑开，而非固定 100vh。
- 外层容器加
padding-bottom: env(safe-area-inset-bottom)，再用body { margin: 0; height: 100vh; overflow: hidden; }锁住视口 - 网格容器设
max-height: calc(100vh - env(safe-area-inset-top))，防止顶部被刘海遮 - 禁止给任何格子设
margin-bottom推到底部，改用align-self: end或margin-top: auto让底栏吸附 - 真机调试时关掉「缩放文字」选项，iOS 字体缩放会触发
rem基准偏移，导致 grid line 错位
最麻烦的从来不是怎么画形状，而是滑块拖到尽头时 thumb 被切掉一半、或者横屏后 Wi-Fi 图标和蓝牙图标叠在一起——这些细节没在网格线里，但在用户手指落下的位置。
