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

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，卡片网格无需媒体查询即可自动换行。