css Grid 注册页布局需语义化html、两列式网格对齐标签与输入框，并用display: contents使子元素直参网格排列，小屏时通过媒体查询转单列。
用 CSS Grid 布局注册页面，关键在于把表单项（如用户名、邮箱、密码等）按逻辑分组，并用网格线对齐标签和输入框，让整体清晰、响应友好、代码简洁。
一、基础 HTML 结构要语义化
每个表单项建议用
包裹
二、Grid 布局：两列式标签+输入框
给表单设 display: grid，用 grid-template-columns 定义两列（标签列 + 输入框列），再用 gap 控制间距：
.register-form { display: grid; grid-template-columns: max-content 1fr; gap: 0.75rem 1.5rem; max-width: 500px; margin: 2rem auto; padding: 1.5rem; }说明：
立即学习“前端免费学习笔记（深入）”；
- max-content 让标签列宽度刚好包裹文字（不固定像素，适配不同语言）
- 1fr 让输入框自动占满剩余空间
- gap 第一个值是行间距（上下），第二个是列间距（左右）
三、让每个表单项占据整行网格
每个 .form-item 默认会按顺序填入网格单元格，但需确保 label 和 input 各占一列、同一行。用 grid-column: 1 / -1 可让按钮跨两列：
.form-item { display: contents; /* 关键：让子元素直接参与父级 grid 排列 */ } .register-form label, .register-form input { margin: 0; }
.register-form button { grid-column: 1 / -1; justify-self: center; padding: 0.75rem 2rem; }
注意：display: contents 是让 label 和 input 直接成为 grid 子项，否则 .form-item 本身会占一个格子，破坏对齐。
四、响应式优化：小屏变单列
在手机上，标签放上面、输入框放下面更易操作。用媒体查询切换布局：
@media (max-width: 480px) { .register-form { grid-template-columns: 1fr; } .register-form label, .register-form input { grid-column: 1; } .register-form label { justify-self: start; } }此时每组 label+input 自动上下排列，按钮仍独占一行。
不复杂但容易忽略：label 的 for 和 input 的 id 必须匹配，才能点击标签聚焦输入框——这是可访问性的基本保障。