用grid-template-areas按行配对定义"label input"可确保label右对齐同一垂直线，配合max-content列宽与justify-self: end实现对齐不挤占input空间，响应式通过媒体查询切换区域布局，ie11需降级为-ms-grid语法。
Grid里用grid-template-areas控制Label和Input对齐
直接靠grid-template-columns硬设两列，Label宽度不一致时会错位；用grid-template-areas能明确锁定每个Label和对应Input的位置关系，Label自动右对齐到同一垂直线。
常见错误是把所有Label写成一个区域、所有Input写成另一个区域——这样Label没法单独右对齐。必须按行定义区域，每行一个"label input"配对：
form {
display: grid;
grid-template-areas:
"label1 input1"
"label2 input2"
"label3 input3";
grid-template-columns: max-content 1fr;
}
关键点：
-
max-content让Label列宽度由最长Label内容决定，其余Label自动撑开空白右对齐 - 每个
<label></label>加grid-area: label1，对应<input>加grid-area: input1 - 别用
justify-self: end强行右推Label——它只作用于单个格子，不解决列宽统一对齐问题
Label右对齐但不挤压Input空间的技巧
Label右对齐后，如果父容器没留足够空白，Input会被挤窄甚至换行。本质是Grid默认按内容分配空间，不是按视觉对齐需求。
正确做法是分离“对齐逻辑”和“尺寸逻辑”：
- 用
grid-column: 1固定Label在第一列，再用justify-self: end让它右贴列右边缘 - Input统一
grid-column: 2，并加min-width: 0防止被长Label撑变形 - 给整个Grid加
gap: 0.5rem，比依赖margin更稳定
示例片段：
label { grid-column: 1; justify-self: end; }
input { grid-column: 2; min-width: 0; }
响应式下Label从上到左布局的断点处理
小屏时Label放Input上方更易读，但Grid区域名不能动态切换——直接改grid-template-areas值就行，不用JS。
注意两点：
- 移动端用
grid-template-areas: "label1" "input1" "label2" "input2"，配合grid-template-columns: 1fr - 别只改
grid-template-columns为1fr就完事——区域名不更新，Label和Input仍会并排挤在一起 - 用
@media (max-width: 480px)包裹整套Grid定义，避免样式层叠冲突
IE11兼容性：用display: -ms-grid替代方案
IE11不支持grid-template-areas，但支持老式-ms-grid语法。别试图polyfill，直接降级为列宽+对齐组合。
实操建议：
- 用
display: -ms-grid+-ms-grid-columns: max-content 1fr - Label加
-ms-grid-column-align: end实现右对齐 - Input加
-ms-grid-column: 2，和现代Grid写法保持结构一致 - 现代浏览器用
display: grid覆盖掉IE规则，CSS顺序很重要
真正难的是Label文字过长时的截断控制——Grid本身不处理文本溢出，得额外加white-space: nowrap; overflow: hidden; text-overflow: ellipsis，这个容易漏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
