CSS Grid布局

Grid（网格）是二维布局系统，可同时控制行和列，是构建复杂页面布局的强大工具。

基本概念

┌─────────────────────────────────────────┐
│  ┌──────┬──────┬──────┬──────┐         │
│  │      │      │      │      │         │
│  ├──────┼──────┼──────┼──────┤ ← 行轨道 │
│  │      │      │      │      │         │
│  ├──────┼──────┼──────┼──────┤         │
│  │      │      │      │      │         │
│  └──────┴──────┴──────┴──────┘         │
│         ↑                              │
│        列轨道                           │
│  ┌───────────────────────┐             │
│  │      Grid Cell 单元格   │             │
│  └───────────────────────┘             │
└─────────────────────────────────────────┘

容器属性

开启 Grid

.container {
  display: grid;
  display: inline-grid;
}

grid-template-columns 定义列

.container {
  /* 固定宽度 */
  grid-template-columns: 200px 200px 200px;

  /* fr 单位：比例分配 */
  grid-template-columns: 1fr 2fr 1fr;

  /* repeat 函数 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* 混合使用 */
  grid-template-columns: 200px 1fr 1fr;
}

grid-template-rows 定义行

.container {
  grid-template-rows: 100px auto 100px;
  grid-template-rows: repeat(3, 1fr);
}

gap 间距

.container {
  gap: 20px;           /* 行列间距 */
  row-gap: 15px;       /* 行间距 */
  column-gap: 20px;    /* 列间距 */
}

grid-template-areas 区域命名

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

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

对齐属性

.container {
  /* 整体在容器中的水平对齐 */
  justify-content: center | start | end | space-between | space-around;

  /* 整体在容器中的垂直对齐 */
  align-content: center | start | end | space-between | space-around;

  /* 所有单元格内容的水平对齐 */
  justify-items: center | start | end | stretch;

  /* 所有单元格内容的垂直对齐 */
  align-items: center | start | end | stretch;
}

项目属性

跨行跨列

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1 / 3;   /* 简写：跨越第1到第3列线 */
  grid-column: span 2;  /* 跨越2列 */

  grid-row: 1 / 3;      /* 跨越2行 */
  grid-row: span 2;
}

单元格内容对齐

.item {
  justify-self: center | start | end | stretch;
  align-self: center | start | end | stretch;
  place-self: center;  /* 简写 */
}

常用布局示例

响应式网格

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

经典三栏布局

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

.header { grid-column: 1 / 4; }
.main { grid-column: 2; }
.sidebar-left { grid-column: 1; grid-row: 2; }
.sidebar-right { grid-column: 3; grid-row: 2; }
.footer { grid-column: 1 / 4; }

等高卡片布局

.card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch; /* 默认值，等高 */
}

居中布局

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

fr 单位与函数

/* 自适应卡片网格 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

注意：auto-fit 会折叠空轨道，auto-fill 会保留空轨道。

要点总结

• Grid 适合二维布局，同时控制行和列
• fr 单位按比例分配剩余空间
• grid-template-areas 直观定义区域布局
• repeat(auto-fit, minmax()) 实现响应式网格
• 项目跨行跨列用 grid-column 和 grid-row