CSS Grid 注册页布局需语义化HTML、两列式网格对齐标签与输入框，并用display: contents使子元素直参网格排列，小屏时通过媒体查询转单列。
用 CSS Grid 布局注册页面，关键在于把表单项（如用户名、邮箱、密码等）按逻辑分组，并用网格线对齐标签和输入框，让整体清晰、响应友好、代码简洁。
一、基础 HTML 结构要语义化
每个表单项建议用 给表单设 说明： 立即学习“前端免费学习笔记（深入）”； 每个 .register-form label,
.register-form input {
margin: 0;
} .register-form button {
grid-column: 1 / -1;
justify-self: center;
padding: 0.75rem 2rem;
} 注意： 在手机上，标签放上面、输入框放下面更易操作。用媒体查询切换布局： 此时每组 label+input 自动上下排列，按钮仍独占一行。 不复杂但容易忽略：label 的 和 ，避免直接用 二、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;
}
三、让每个表单项占据整行网格
.form-item 默认会按顺序填入网格单元格，但需确保 label 和 input 各占一列、同一行。用 grid-column: 1 / -1 可让按钮跨两列：.form-item {
display: contents; /* 关键：让子元素直接参与父级 grid 排列 */
}
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;
}
}for 和 input 的 id 必须匹配，才能点击标签聚焦输入框——这是可访问性的基本保障。
