CSS Grid 布局完全指南

Grid 与 Flexbox 的选择

Flexbox 是一维布局工具，适合行或列方向的对齐；Grid 是二维布局工具，适合同时控制行和列。两者并不对立，实际项目中经常配合使用。

核心概念

.container {
  display: grid;

  /* 定义列：3 列，各占 1 份 */
  grid-template-columns: repeat(3, 1fr);

  /* 定义行：第一行 80px，其余自动 */
  grid-template-rows: 80px auto;

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

命名区域布局

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

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

响应式 Grid

无需媒体查询实现响应式列数：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

总结

CSS Grid 的学习曲线在于要建立"格子思维"——先想清楚整体结构，再用 Grid 属性描述它。一旦习惯这种思维方式，复杂布局会变得异常清晰直观。