如何用Media Query实现屏幕≥600px时表单采用Grid布局？代码正确性咨询

你的代码是否正确？ #

这段代码语法上是正确的，但仅设置.form {display: grid}不足以让表单内的标签和元素适配网格布局——它只是把.form变成了Grid容器，但没有定义网格的列、行规则，子元素会默认堆叠成一列，和普通块级布局没区别。

完整实现步骤 #

要让表单在≥600px时呈现合理的Grid布局，需要补充网格轨道定义、间距等规则，以下是具体实现：

1. 基础HTML结构

<form class="form">
  <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-group">
    <label for="phone">电话</label>
    <input type="tel" id="phone" name="phone">
  </div>
  <button type="submit">提交</button>
</form>

2. 响应式Grid布局CSS

/* 默认移动端堆叠布局 */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 屏幕≥600px时切换为Grid布局 */
@media only screen and (min-width: 600px) {
  .form {
    display: grid;
    /* 定义两列：标签占1份，输入控件占2份 */
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
  }

  /* 让标签垂直居中，与输入框对齐 */
  .form-group label {
    align-self: center;
  }

  /* 提交按钮跨两列展示 */
  .form button {
    grid-column: 1 / -1;
    padding: 0.75rem;
  }
}

关键说明 #

• grid-template-columns：Grid布局的核心规则，用来定义网格列的数量和宽度比例，示例中1fr 2fr表示两列，第一列宽度为第二列的1/2。
• gap：控制网格单元格之间的间距，替代传统margin写法，布局更简洁可控。
• 子元素适配：Grid容器的直接子元素（如.form-group和按钮）会自动成为网格项，通过grid-column可控制元素的跨列范围，比如让提交按钮占满整行。

内容的提问来源于stack exchange，提问作者mitoman