用 grid-template-columns: 1fr 1fr 可实现表单项两列对称排列，关键在于结构扁平（每个 .form-item 为 grid 直接子元素）、列定义用 1fr 1fr 而非 50% 或 auto、统一用 gap 控制间距、通过 justify-items: start 和 align-items: center 精确对齐内容，并在小屏时用媒体查询回退为单列。
用 grid-template-columns: 1fr 1fr 就能实现表单项两列对称排列，关键在结构干净、间距统一、对齐可控——不是靠浮动或百分比模拟，而是让 Grid 真正把容器均分为两个逻辑等宽轨道。
结构要扁平，表单项必须是 Grid 直接子元素
每组表单项（如一个 label + 一个 input）应包裹在一个 <div class="form-item"> 里，这个 div 是 Grid 容器的直接子项。不要多套一层 wrapper，否则 Grid 无法按预期分配列轨道。
<ul>
<li>✅ 正确：<code><form class="grid-form">
<div class="form-item">
<label>姓名</label><input>
</div>
<div class="form-item">...</div>
</form>
.form-item 外再加一层 <div class="row">，会中断 Grid 的列计算逻辑
<h3>列定义用 1fr 1fr，别用 50% 或 auto</h3>
<p><code>grid-template-columns: 1fr 1fr 表示两列严格等分剩余空间，响应式友好，且不受内容宽度干扰；而 50% 在 Grid 中语义模糊，auto 会让列宽随内容伸缩，破坏对称性。
- 推荐写法：
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; - 小屏需单列时，用媒体查询覆盖：
@media (max-width: 768px) { .grid-form { grid-template-columns: 1fr; } }
表单项内部对齐靠 justify-items 和 align-items
默认情况下，label 和 input 在各自格子中会拉满（stretch），但文字常需居中或左对齐。统一设：
-
justify-items: start;—— 所有格子内内容水平靠左 -
align-items: center;—— 垂直方向居中，适配不同高度的 input 和 textarea - 若某项需右对齐（如提交按钮横跨两列），单独加
grid-column: 1 / -1;和justify-self: end;
间距统一用 gap，别混用 margin
表单项之间的垂直间距、左右列之间的水平间距，全部交给 gap 控制。它只作用于网格项之间，不会影响外边距折叠或父容器尺寸。
- 例如：
gap: 1.25rem 1.5rem;→ 垂直间距 1.25rem，水平间距 1.5rem - 避免给
.form-item设margin-bottom，否则在小屏单列时可能产生双倍间隙 - 如果需要整体内边距（如离容器边缘留空），给 form 加
padding: 1rem;，而非依赖 margin
