用 grid-template-areas 布局条形图需显式声明所有区域（如 "y-axis chart-area"），y 轴设 minmax(60px, 120px) 防截断，chart-area 行高 1fr；y 轴文字改用 writing-mode: vertical-lr + text-orientation: mixed 对齐；条形高度用 calc(var(--value) / var(--max-value) * 100%) 实现数值映射；x 轴刻度容器需 position: relative，刻度用 transform: translatex(-50%) 居中；避免 grid-gap 与 border 混用导致宽度误差，统一 box-sizing: border-box；旧版 safari 需用 grid-column-gap 替代 grid-gap。
grid-template-areas 怎么对齐条形图和坐标轴
用 grid-template-areas 布局条形图时，最常踩的坑是坐标轴文字被截断、条形错位、响应式下区域重叠。根本原因是没预留足够空间给 y 轴标签宽度，且没用 minmax() 控制列宽弹性。
- 把 y 轴（文字标签列）单独设为一个
grid-area，比如y-axis，宽度用minmax(60px, 120px)，避免小屏下挤压 - 条形图容器设为
chart-area，行高设为1fr，确保高度随内容撑开 -
grid-template-areas中必须显式写出所有区域，包括空占位（如"y-axis chart-area"），否则 Firefox 会忽略未声明的区域 - 不要在
grid-area内部再用flex布局 y 轴文字——它会破坏 grid 的基线对齐，改用writing-mode: vertical-lr+text-orientation: mixed
条形高度怎么和数值严格对应（不用 JS 计算）
CSS 本身不能做数值映射，但可以靠 calc() + 自定义属性实现“伪绑定”。前提是数据范围已知、最大值固定，否则条形比例会失真。
- 在根元素定义
--max-value: 85;，每个条形用--value表示当前数值 - 条形高度写成
height: calc(var(--value) / var(--max-value) * 100%);，注意除法必须写在calc()里，不能提前算好 - 如果数值含小数，
calc()在 Safari 15.4 以下会四舍五入失效，得补transform: scaleY(...)回退 - 别用
height: 0%作为默认值——IE11 和部分安卓 WebView 会渲染为 0px，应设为height: 1px
坐标轴刻度线和数字怎么对齐条形顶部
刻度线不是装饰，它是视觉参照基准。用绝对定位或 margin 推动刻度，90% 的错位都源于没把条形容器设为 position: relative。
- 把 x 轴刻度容器（
.x-ticks）放在条形图容器内部，设position: absolute; bottom: 0; - 每个刻度
.tick用transform: translateX(-50%)居中对齐对应条形中心，而不是靠left: 20%这类估算值 - 刻度数字字体大小超过 12px 时，
line-height必须显式设为1，否则 baseline 偏移会导致整体下沉 - Firefox 对
transform: translateX的 subpixel 渲染不稳定，加will-change: transform可缓解
grid-gap 和 border-box 混用导致宽度计算错误
当条形图容器设了 border: 1px solid #ccc，又用了 grid-gap: 8px，实际条形宽度会比预期少 2px（左右 border）+ 8px（gap），尤其在 flex + grid 混合布局里极易漏查。
立即学习“前端免费学习笔记（深入）”；
- 统一用
box-sizing: border-box，并在网格容器上加padding: 0，避免浏览器默认样式干扰 -
grid-gap的值不能用百分比——它只接受px、rem或em，用%会被直接忽略 - 如果条形需要 hover 缩放，别在
:hover里改width，而要用transform: scaleX(1.05)，否则触发重排影响性能 - 旧版 Safari（≤13.1）不支持
grid-gap，必须用grid-column-gap和grid-row-gap分开写
真正难的不是画出条形，而是让刻度线、文字、条形三者像素级对齐；一旦涉及动态数据更新，CSS 变量的刷新时机和浏览器重绘节奏就容易脱节——这时候就得切回 JS 控制，别硬扛。
