CSS Grid 布局实战：从理论到落地

CSS Grid 是目前最强大的二维布局系统。相比 Flexbox 的一维布局，Grid 可以同时处理行和列，让复杂布局变得简单。

核心概念

Grid 的核心概念包括：网格容器、网格项、网格线、网格轨道和网格区域。理解这些概念是掌握 Grid 的基础。

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

响应式布局

结合 auto-fill 和 minmax()，可以轻松实现响应式网格，无需媒体查询。

实战建议

不要试图用 Grid 替代 Flexbox。两者各有所长：Grid 适合页面级布局，Flexbox 适合组件级排列。