CSS Grid 的 grid-area 仅用于定位，无法实现 textarea 自适应高度；纯 CSS 方案需用 min-height + height: auto + overflow: hidden 组合，但 iOS 15 及更早版本支持差；真正动态撑高必须依赖 JS 测量 scrollHeight。
CSS Grid 无法让 textarea 自动撑高——grid-area 只是定位区域，不参与内容尺寸计算。想靠它实现“随文字变高”，纯 CSS 行不通。
为什么 grid-area 对自适应高度没用
grid-area 是布局定位属性，作用是把元素放进某个网格区域，类似“贴标签”。它不会影响 textarea 的内部内容测量逻辑，也不会触发 scrollHeight 或内容重排。即使你把它放在 grid-template-areas 里，它的高度依然由 height、min-height 或浏览器默认行为决定，和文字行数无关。
常见误判场景：
- 写了
grid-area: input;就以为能“自动占满”父容器高度 → 实际只是定位，不是拉伸 - 父容器用了
display: grid; grid-template-rows: 1fr;，但textarea没设height: 100%→ 它会按默认行高渲染，通常就 2–3 行 - 加了
min-height: 100%却没给父级明确高度 → 百分比失效，退化为内容高度
移动端真正可用的纯 CSS 方案（无 JS）
目前唯一稳定、无需 JS 且兼容 iOS/Android 主流浏览器的方案，是利用 min-height + height: auto + overflow: hidden 组合，配合 box-sizing: border-box：
textarea {
min-height: 40px;
max-height: 120px;
height: auto;
overflow-y: hidden;
resize: none;
box-sizing: border-box;
line-height: 1.4;
}
关键点：
-
height: auto在部分浏览器（如 Safari 16.4+）中能让textarea初始渲染时略高于内容，但输入后不会持续增长 —— 它只在首次渲染生效，不是动态响应 -
overflow-y: hidden阻止滚动条出现，但用户仍可通过光标上下键浏览超出行数的内容 -
max-height必须设，否则在长文本下可能撑爆视口（尤其 iOS 键盘弹出时） - 该方案在 Android Chrome 120+ 和 iOS Safari 17+ 表现尚可，但 iOS 15 及更早版本对
height: auto支持极差，会卡死在初始高度
为什么你看到的“Grid 自适应”示例其实偷偷用了 JS
搜索结果里所谓“用 Grid + grid-area 实现 textarea 自适应”，基本都混淆了两个概念：一个是容器布局（Grid），一个是内容驱动的高度变化（必须靠 JS 测量 scrollHeight）。真实项目中能跑通的，几乎都包含类似逻辑：
- 监听
input事件 - 先设
textarea.style.height = 'auto'清除旧高度 - 再读
textarea.scrollHeight并赋值给style.height - 外层 Grid 容器只是恰好用了
grid-template-rows: 1fr来约束最大可用空间，不是“驱动”自适应
换句话说：Grid 负责“划地盘”，JS 才负责“量身高”。漏掉 JS，就只剩一个固定高度的 textarea 呆在格子里。
移动端键盘弹出时最常被忽略的坑
iOS 键盘弹出会压缩 visualViewport，但很多 JS 实现直接在 input 回调里读 scrollHeight，拿到的是键盘未弹出前的尺寸，导致高度偏小、文字被遮挡。正确做法：
- iOS 16.4+：监听
window.visualViewport?.addEventListener('resize', ...)，等视口稳定后再重算 - 降级方案（iOS focus 后用
setTimeout(..., 300)延迟执行 resize，避开键盘动画期 - 别依赖
window.innerHeight变化 —— 安卓 Chrome 很多版本根本不触发resize事件
真正的难点不在怎么写样式，而在怎么和移动端原生交互节奏对齐。Grid 再漂亮，也救不了没等键盘落稳就急着改高度的 JS 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
