textarea高度自适应需三步：height: auto、box-sizing: border-box、min-height；Grid中须加align-self: start防拉伸；input[type="text"]无法自适应，必须用textarea。
textarea高度自适应必须配height: auto和box-sizing: border-box
直接写min-height没用，textarea在Grid里默认会被align-self: stretch拉满整行高，导致无法随内容收缩。关键三步缺一不可：
-
height: auto—— 必须显式声明，禁用height: 100%或固定值 -
box-sizing: border-box—— 否则padding和border会撑出滚动条或遮挡文字 -
min-height: 40px（或其他合理值）—— 提供最小视觉高度，避免空时塌陷
若父容器是display: grid且设了grid-template-rows: 1fr，记得给textarea加align-self: start，否则它仍会被拉伸。
input[type="text"]不能自适应高度，别硬改CSS
原生input是单行替换元素，不支持换行、不响应height: auto、也不受align-self在垂直方向上“撑开”内容的影响。常见错误包括：
- 给
input设min-height+resize: vertical—— resize无效，且输入长内容时文字被截断 - 套在Grid里依赖
align-self: start假装能“贴顶” —— 实际只是对齐到拉伸后的格子顶部，视觉上仍像被卡住 - 用
line-height+padding模拟多行 —— 换行后光标错位、移动端键盘弹起时定位异常
真要多行+自适应，必须换textarea；若坚持单行语义，就接受固定高度，别碰height: auto。
Grid中align-self失效的三个高频原因
写了align-self: center却没反应？先排查这三点：
- 父容器没设
display: grid或display: inline-grid——align-self只在Grid上下文生效 - 所在网格行没实际高度 —— 比如
grid-template-rows: auto或未定义，浏览器把行高压缩到内容本身，没空间可“居中” -
textarea被position: absolute或float脱离了网格流 —— 它已不是网格项，align-self直接被忽略
特别注意：如果textarea设置了max-height或height，align-self: stretch会失效，但start/center仍有效 —— 这是可控的退阶行为，不是bug。
表单每组label+input用独立Grid，别整个form设grid
把display: grid加在form上，会导致所有label挤进第一列、所有input进第二列，破坏语义与可访问性。正确做法是：
- 每组用
- 给
.field设display: grid和grid-template-columns: max-content 1fr -
label加justify-self: end右对齐，textarea加align-self: start防拉伸 - 小屏时用
@media切为grid-template-columns: 1fr，同时重置label的justify-self: start
这样每组都是独立网格单元，align-self才能精准控制textarea在自己那格里的垂直位置，而不是被整个表单的行列定义绑架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
