CSSGrid表单布局教程详解

<form class="register-form">
  <div class="form-item">
    <label for="username">用户名</label>
    &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; required&gt;
  </div>
  <div class="form-item">
    <label for="email">邮箱</label>
    &lt;input type=&quot;email&quot; id=&quot;email&quot; name=&quot;email&quot; required&gt;
  </div>
  <div class="form-item">
    <label for="password">密码</label>
    &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; required&gt;
  </div>
  <button type="submit">注册</button>
</form>

二、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 排列 */
}
<p>.register-form label,
.register-form input {
margin: 0;
}</p><p>.register-form button {
grid-column: 1 / -1;
justify-self: center;
padding: 0.75rem 2rem;
}</p>

注意：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 必须匹配，才能点击标签聚焦输入框——这是可访问性的基本保障。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~