【前端】每日一道面试题3：如何实现一个基于CSS Grid的12列自适应布局？

要实现一个基于CSS Grid的12列自适应布局，关键在于利用网格系统的灵活性和响应式设计能力。以下是具体实现步骤及核心代码示例：

一、基础网格容器定义

1. 创建网格容器
   使用display: grid将父元素定义为网格容器：

   .container {display: grid;grid-template-columns: repeat(12, 1fr); /* 12列等宽 */gap: 20px; /* 列间间距 */
   }
   

   • repeat(12, 1fr)生成12列，每列占可用空间的1/12，实现自适应宽度。
   • gap统一设置行列间距，替代传统margin或padding布局。

2. 子元素跨列控制
   通过grid-column属性定义子元素占用的列数：

   .col-3 { grid-column: span 3; } /* 占3列 */
   .col-6 { grid-column: span 6; } /* 占6列 */
   

   或使用命名网格线：

   .col-4 { grid-column: 1 / 5; } /* 从第1列到第5列（占4列） */
   

---

二、响应式断点处理

通过媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {.container {grid-template-columns: repeat(6, 1fr); /* 小屏幕改为6列 */}.col-6 { grid-column: span 3; } /* 原6列元素在小屏占3列 */
}@media (max-width: 480px) {.container {grid-template-columns: repeat(4, 1fr); /* 移动端4列 */}.col-3 { grid-column: span 2; } /* 小屏下占2列 */
}

• 利用auto-fill或auto-fit可实现动态列数（如卡片布局），但12列系统更适合固定结构。

---

三、实战案例：圣杯布局

结合12列网格实现经典三栏布局：

<div class="container"><header class="header">Header</header><nav class="sidebar">Sidebar</nav><main class="content">Main Content</main><footer class="footer">Footer</footer>
</div>

.container {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-areas:"header header header header header header header header header header header header""sidebar content content content content content content content content content content content""footer footer footer footer footer footer footer footer footer footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }@media (max-width: 1024px) {.container {grid-template-areas:"header header header header header header header header header header header header""content content content content content content content content content content content content""footer footer footer footer footer footer footer footer footer footer footer footer";}.sidebar { display: none; } /* 小屏隐藏侧边栏 */
}

• 通过grid-template-areas直观定义布局结构，媒体查询调整响应式表现。

---

四、关键优化点

1. 间距控制
   使用gap替代传统边距，避免额外计算，代码更简洁。
2. 混合单位
   结合minmax()实现列宽动态范围：

   grid-template-columns: repeat(12, minmax(100px, 1fr)); /* 最小100px，最大自适应 */
   

3. 对齐方式
   通过justify-items和align-items统一子元素对齐，或用justify-self单独调整。

---

总结

通过CSS Grid的repeat()、fr单位和媒体查询，可高效构建12列自适应布局。此方案兼顾代码简洁性与响应式灵活性，适合构建企业级网页框架（如Bootstrap替代方案）。实际开发中可根据内容复杂度选择是否引入auto-fill动态列或固定列数结构。