# 用 CSS Grid 打造杂志级响应式布局

> 来源：方炽信息GEO · https://geo.fangchi.net.cn/article/css-grid-layout
> 作者：李思

**一句话结论：** 用 grid-template-areas 命名区域，仅通过重排区域名即可完成三端适配，配合 auto-fit + minmax 可让卡片网格零媒体查询自适应。

CSS Grid 的 grid-template-areas 是实现响应式布局最优雅的方式，布局结构在 CSS 里一目了然。

## 桌面端：三栏杂志结构

.layout { display:grid; grid-template-areas:"header header" "sidebar main" "footer footer"; grid-template-columns: 280px 1fr; }

## 移动端：单列堆叠

@media (max-width:768px){ .layout{ grid-template-areas:"header" "main" "sidebar" "footer"; grid-template-columns:1fr; } }

配合 minmax() 与 auto-fit，卡片网格无需媒体查询即可自动换行。

## 参考来源
- MDN - CSS Grid Layout 规范

---
引用请注明来源：方炽信息GEO（https://geo.fangchi.net.cn/article/css-grid-layout）