用 CSS Grid 实现高效布局的 3 个实战技巧
—— 告别传统 Float 与 Flex 的局限
1. 动态网格：auto-fit + minmax() 响应式适配
无需媒体查询！一行代码创建自适应列：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
auto-fit：自动填充可用空间minmax(250px, 1fr)：最小列宽 250px，最大按比例拉伸
→ 移动端单列，桌面端自动多列（完美适配卡片布局）
2. 区域命名布局：直观的模板语法
用语义化命名定义布局结构：
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header {
grid-area: header; }
.sidebar {
grid-area: sidebar; }
/* 调整布局只需修改模板，无需动 DOM 结构！ */
优势：视觉化维护，媒体查询中只需重定义 grid-template-areas
3. 间隙控制进阶：gap 属性替代 Margin
Grid 专属间隙方案：
.grid {
display: grid;
gap: 20px 30px; /* 行间距 20px，列间距 30px */
}
✅ 比 margin 更简洁
✅ 避免传统布局的间隙计算问题
✅ 支持百分比单位（如 gap: 5%）
🚀 实战场景：复杂表单布局
传统方案需嵌套多层 div，用 Grid 只需：
.form-grid {
display: grid;
grid-template-columns: [label] 120px [input] 1fr;
gap: 15px;
}
label {
grid-column: label; }
input {
grid-column: input; }
→ 标签与输入框精准对齐，扩展性强！
实用建议：
- 结合
:where()降低选择器优先级- 使用
grid-template缩写属性- Chrome DevTools 的 Grid 调试工具可视化线号
总结：Grid 不是 Flexbox 的替代品，而是多维布局的终极解决方案！
