表单是页面里最容易出现样式崩坏的区域：有的输入框占满一行，有的只占一半；label和输入框对不齐；验证提示文字一出现，整个布局就往下挤歪。过去我们习惯用float、inline-block加一堆margin去硬凑，代码越写越乱。CSS Grid出现之后，表单布局其实可以变得非常规整，只要把整个form声明为grid容器，配合几列模板，所有控件会自动按网格排列，对齐、间距、换行全部交给浏览器处理。
为什么表单布局适合用Grid而不是Flex
很多人一上来就用Flexbox做表单，结果发现每行都要单独写一个flex容器，行与行之间的间距还得额外控制。Flex本质是一维布局，它擅长处理一行或者一列内部的空间分配，而表单天然是一个二维结构：既有列的概念（label一列、输入框一列），也有行的概念（一个字段一行）。这正是Grid的主场。
用Grid做表单的最大好处是列宽全局统一。你在容器上声明一次grid-template-columns: 120px 1fr，之后不管表单里有几个字段，所有label都自动占120像素，所有输入框都自动占据剩余空间。再也不需要给每个label单独写宽度，也不用担心某个字段label文字太长导致对不齐。
另一个好处是间距控制。传统写法中，输入框之间的垂直间距靠margin-top、margin-bottom堆叠，很容易出现上下间距相加不等于预期的问题。Grid的gap属性只作用于相邻项之间，不会在容器边缘产生多余空白，间距计算简单直观。
基础写法：两列网格实现label与input对齐
最经典的表单网格是两列结构：第一列放label，第二列放输入框。下面是一个完整的示例，覆盖了常见的文本框、下拉框、单选组和按钮区。
<form class="form-grid">
<label for="name">用户名</label>
<input type="text" id="name" name="name">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<label>性别</label>
<div class="radio-group">
<label><input type="radio" name="gender" value="1"> 男</label>
<label><input type="radio" name="gender" value="2"> 女</label>
</div>
<label for="city">所在城市</label>
<select id="city" name="city">
<option>北京</option>
<option>上海</option>
</select>
<div class="form-actions">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
.form-grid {
display: grid;
grid-template-columns: 120px 1fr; /* 第一列固定宽度，第二列自适应 */
gap: 16px 12px; /* 行间距16px，列间距12px */
max-width: 520px;
align-items: center; /* 垂直居中对齐，label与控件在同一水平线 */
}
.form-grid label {
text-align: right;
color: #555;
}
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid select {
width: 100%;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/* 按钮区横跨两列，靠右对齐 */
.form-actions {
grid-column: 1 / -1; /* 从第一列跨到最后一列 */
display: flex;
justify-content: flex-end;
gap: 8px;
}这里有几个细节值得注意。第一，align-items: center让label和不同高度的控件垂直居中，否则默认的stretch会让radio组被拉伸变形。第二，按钮区用grid-column: 1 / -1横跨全部列，这样它独占一行，不会挤在label列里。第三，输入框设置width: 100%配合box-sizing: border-box，保证padding不会把输入框撑出网格。
radio组用了一个div包裹，这样它整体作为网格的第二个子项参与排列，内部再用普通行内布局排按钮即可。如果不用div包裹，每个radio都会被当成独立的网格项，排列会乱掉。
进阶技巧：验证提示、跨列与响应式处理
真实表单往往还有错误提示、必填标记、字段分组等需求，直接在两列结构上加东西容易破版。处理思路是：让提示文字也作为网格项参与布局，横跨第二列，这样出现或消失都不会影响其他行。
.field-error {
grid-column: 2; /* 提示文字只占第二列，与输入框上下排列 */
color: #e33;
font-size: 12px;
margin-top: -8px; /* 微调，向上贴近输入框 */
}
/* 必填星号，用伪元素加在label后面 */
.form-grid label.required::after {
content: " *";
color: #e33;
}
/* 小屏下改成单列，label在上方 */
@media (max-width: 480px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-grid label {
text-align: left;
}
.field-error {
grid-column: 1;
}
}响应式是Grid表单的另一个亮点。大屏用两列，小屏只需把grid-template-columns改成1fr，label就自动换到输入框上方，形成常见的移动端堆叠式布局，不需要改任何HTML结构。这就是结构与样式分离带来的好处。
如果表单字段较多，还可以利用repeat()和auto-fit做多列自适应布局，比如地址表单让省、市、区三个下拉框在同一行排列：
.address-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}套嵌网格完全合法，外层管label与内容区的对齐，内层管具体控件的横向排列，职责清晰。最后提醒一点兼容性：Grid在现代浏览器中支持已经非常完善，包括各种国产浏览器的内核版本，基本不需要担心。只有在必须兼容极老的IE浏览器时，才需要考虑降级方案，例如给容器退回display: block，靠块级元素的默认流式布局保证表单依然可用，只是失去对齐美感而已。