CSS Grid 布局怎么使用？

Question

CSS Grid 布局怎么使用？

仓乃文 · Accepted Answer

Grid 是二维布局系统，可以同时控制行和列，适合复杂的页面整体布局。核心概念是定义网格容器和网格项。

基本用法：
```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 列等宽 */
  grid-template-rows: auto 1fr auto;       /* 头部、内容、脚部 */
  gap: 20px;                               /* 网格间距 */
}
```

常用布局技巧：
```css
/* 响应式网格：自动填充，每列最小 250px */
.container {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* 跨越多列 */
.item { grid-column: span 2; }

/* 命名区域布局 */
.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
```

补充说明：
- fr 是 Grid 专用单位，表示可用空间的比例分配
- Grid 适合页面整体布局，Flexbox 适合组件内一维排列
- grid-gap 是 gap 的旧写法，现已废弃建议使用 gap