使用grid-template-areas可直观实现表单分组布局，通过命名区域并在容器中定义网格结构，如"username username""email phone"等，结合grid-area将元素对应到指定区域，利用grid-template-columns设置列宽并配合媒体查询在小屏下切换为单列，实现响应式布局，结构清晰且易于维护。
使用CSS Grid的grid-template-areas可以直观地将表单分组布局可视化，让结构更清晰易维护。通过为不同表单区域命名，再在容器中按网格排列这些名称，能快速构建复杂的响应式表单。
定义表单区域名称
先为表单中的各个部分起一个语义化的名称，比如用户名、邮箱、电话、地址等。每个区域名将对应一个HTML元素，并在Grid容器中统一规划位置。
例如：
.grid-form {
display: grid;
grid-template-areas:
"username username"
"email phone"
"address address"
"actions actions";
}
每一行字符串代表网格的一行，每个词代表一列中的单元格。相同名称的会合并成一个区域。
为元素分配区域
在CSS中使用grid-area属性将具体表单控件与模板中的名称对应起来。
立即学习“前端免费学习笔记（深入）”；
.username { grid-area: username; }
.email { grid-area: email; }
.phone { grid-area: phone; }
.address { grid-area: address; }
.actions { grid-area: actions; }
HTML结构保持简洁：
<div class="grid-form"> <div class="username"><label>姓名</label><input/></div> <div class="email" ><label>邮箱</label><input/></div> <div class="phone" ><label>电话</label><input/></div> <div class="address" ><label>地址</label><textarea></textarea></div> <div class="actions" ><button>提交</button></div> </div>
设置列宽与响应式调整
使用grid-template-columns控制每列宽度。可以结合fr、px或百分比灵活布局。
.grid-form {
grid-template-columns: 1fr 1fr; /* 两列均分 */
gap: 16px; /* 元素间距 */
}
在小屏幕上可改为单列：
@media (max-width: 600px) {
.grid-form {
grid-template-areas:
"username"
"email"
"phone"
"address"
"actions";
grid-template-columns: 1fr;
}
}
这样无需改动HTML，仅通过CSS就能实现布局切换。
基本上就这些。用grid-template-areas做表单分组，结构清晰，修改方便，特别适合需要对齐和分区的复杂表单场景。不复杂但容易忽略细节，比如区域名拼写一致性和空格对齐。
