CSS Grid 布局

Grid 是二维布局系统，同时控制行和列，是复杂页面布局的最佳工具。

核心概念

Grid Container（网格容器）
  ├── Grid Lines（网格线）：1, 2, 3...（从 1 开始）
  ├── Grid Tracks（网格轨道）：行/列
  ├── Grid Cell（网格单元格）
  └── Grid Area（网格区域）：多个单元格组成

容器属性

.container {
  display: grid;

  /* 定义列：3 列等宽 */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: 200px 1fr 200px;  /* 固定-自适应-固定 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* 响应式 */

  /* 定义行 */
  grid-template-rows: 60px 1fr auto;
  grid-template-rows: repeat(3, 100px);

  /* 间距 */
  gap: 16px;
  row-gap: 16px;
  column-gap: 24px;

  /* 命名区域 */
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

  /* 对齐 */
  justify-items: stretch;   /* 单元格内水平对齐 */
  align-items: stretch;     /* 单元格内垂直对齐 */
  justify-content: start;   /* 整个网格水平对齐 */
  align-content: start;     /* 整个网格垂直对齐 */
}

子项属性

.item {
  /* 按线定位 */
  grid-column: 1 / 3;      /* 从第 1 条线到第 3 条线（跨 2 列）*/
  grid-column: 1 / span 2; /* 从第 1 条线跨 2 列 */
  grid-row: 1 / 2;

  /* 命名区域 */
  grid-area: header;
  grid-area: sidebar;

  /* 单项对齐 */
  justify-self: center;
  align-self: end;
}

经典布局

圣杯布局

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

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

响应式卡片网格

.card-grid {
  display: grid;
  /* auto-fill：尽可能多的列；minmax：最小 280px，最大 1fr */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* 无需媒体查询，自动响应式！*/

杂志布局

.magazine {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap: 16px;
}

/* 特色文章占据更大区域 */
.featured {
  grid-column: 1 / 3;  /* 跨 2 列 */
  grid-row: 1 / 3;     /* 跨 2 行 */
}

居中布局

/* 完美居中 */
.center {
  display: grid;
  place-items: center;  /* justify-items + align-items 简写 */
  min-height: 100vh;
}

Grid vs Flexbox 选择

Flexbox（一维）：
  ✓ 导航栏（水平排列）
  ✓ 卡片内部布局
  ✓ 按钮组
  ✓ 不确定数量的项目

Grid（二维）：
  ✓ 页面整体布局
  ✓ 图片画廊
  ✓ 仪表盘
  ✓ 需要精确控制行和列的场景

总结

• repeat(auto-fill, minmax(250px, 1fr)) 是响应式网格的万能公式
• grid-template-areas 让布局意图一目了然
• place-items: center 是最简单的居中方案
• Grid 和 Flexbox 可以嵌套使用，各司其职