Grid两列布局需为每组label+input设display: grid和grid-template-columns: max-content 1fr，label用justify-self: end右对齐且nowrap防换行，小屏时改1fr并重置justify-self: start，配合row-gap确保可访问性与垂直对齐。
Grid两列布局怎么让label和input自动配对
靠grid-template-columns定义两列不够，必须用display: grid作用在每组label+input的父容器上，而不是整个表单。否则所有元素会混排，label和input无法保证相邻成对。
常见错误是把grid加在form上，结果所有label挤在第一列、所有input挤在第二列——这看起来“对齐”了，但语义断裂，键盘导航、屏幕阅读器会失效，且响应式时难以单独控制某组间距。
- 每组用
<div class="field"> <label>...</label><input> </div>包裹 - 给
.field设display: grid和grid-template-columns: max-content 1fr -
max-content让label按文字宽度自适应，避免过长label撑开整列 - 别用
fr均分两列——label不需要弹性，input才需要
label右对齐但不破坏网格结构
想让label右侧贴齐输入框左边缘，不能靠text-align: right暴力拉伸，那会扩大label的占据空间，干扰grid列宽计算。正确做法是用justify-self: end，它只移动内容盒，不改变grid轨道分配。
如果label文字过长换行，justify-self: end会让每行都右对齐，视觉混乱。这时要加white-space: nowrap或限制max-width，强制单行显示。
立即学习“前端免费学习笔记（深入）”；
- 给
label加justify-self: end，不是给整个.field - 配合
overflow: hidden和text-overflow: ellipsis防溢出 - 避免用
margin-left: auto——它在grid里行为不稳定，尤其在IE旧版中失效
响应式断点下如何退化为单列
小屏时两列太挤，直接用@media把grid-template-columns改成1fr就行，但要注意：此时justify-self: end会让label跑到最右边，反而难读。得一并重置为justify-self: start。
更关键的是，单列时label和input的垂直间距容易过小。Grid默认row-gap不继承，必须显式设置，否则移动端手指点选困难。
- 媒体查询内同时改
grid-template-columns和justify-self - 用
row-gap: 0.75rem统一控制组间空隙，比margin更可靠 - 别依赖
gap在父容器上生效——它只对直系子项起作用，嵌套结构要小心层级
为什么不用float或inline-block而坚持Grid
因为表单控件有固有高度差异（select、textarea、input[type=checkbox]），float和inline-block会导致基线错位、换行不可控、垂直对齐始终不干净。Grid的align-items: baseline能真正对齐文本行高，且不依赖字体渲染细节。
另一个隐形坑是vertical-align在inline-block里默认是baseline，但不同浏览器对表单元素的baseline定义不一致，导致Chrome和Safari里label和input看起来“一高一低”。Grid绕过了这个老问题。
- Checkbox/radio需要额外包裹
div才能参与grid布局，否则会因display: inline被忽略 - 避免给
input设height硬调——优先用padding和line-height控制视觉高度 - Grid的
minmax(0, 1fr)比单纯1fr更能防止内容溢出，尤其在flexible容器中
align-items: baseline和row-gap的组合。没有它们，Grid看着结构对了，但label和input的垂直位置永远差那么一两个像素，用户盯着看就难受。 
