使用Grid布局可高效创建响应式表单，通过grid-template-columns设置列宽比例，gap统一控制间距，结合媒体查询实现不同屏幕下的自适应排列，提升可读性与美观性。
在CSS中使用Grid布局制作响应式表单，能高效控制行列排列与间距，让表单在不同屏幕下都保持良好的可读性和美观性。关键在于利用grid-template-columns、gap属性以及媒体查询实现灵活适配。
使用Grid定义表单结构
将表单容器设为display: grid，通过grid-template-columns控制每行的列数。例如两列布局适合标签与输入框并排：
.form-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px;
}
.form-grid label {
text-align: right;
padding-right: 8px;
}
上面代码中，第一列放标签，第二列放输入框，比例为1:2，gap统一设置行与列之间的间距，避免使用margin造成计算复杂。
响应式断点调整列数
在小屏幕上，两列可能太挤，可通过媒体查询改为单列堆叠：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-grid label {
text-align: left;
}
}
这样在手机上，每个“标签+输入”自动占满一行，提升可操作性。你也可以使用minmax()和auto-fit实现更灵活的自适应网格：
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
这种写法让每个表单项最小宽度250px，超出容器时自动换行，适合多字段自由排列。
精细控制行列间距
gap属性是控制Grid间距的核心，可分别设置行与列：
-
row-gap: 10px—— 控制行间距 -
column-gap: 20px—— 控制列间距 -
gap: 10px 20px—— 简写形式（行 列）
比如在表单中，你可能希望垂直间距更大以便阅读，水平间距稍小节省空间：
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 16px;
column-gap: 24px;
}
基本上就这些。用Grid布局做响应式表单，结构清晰，维护简单，配合gap能轻松统一视觉节奏，比传统浮动或Flex布局更直观可控。
