CSS Grid（网格布局）是 CSS 中一种强大的二维布局系统，专为网页布局而设计。它允许你同时在行和列两个方向上控制元素的排布，非常适合构建复杂的页面结构。

一、什么是 CSS Grid？

CSS Grid Layout（网格布局）是一种基于网格的布局模型，通过将容器划分为行和列组成的“网格”，然后将子元素放置到这些网格单元中。与 Flexbox（主要用于一维布局）不同，Grid 是二维布局（同时处理行和列），更适合整体页面或复杂组件的布局。

二、基本使用方法

1. 创建一个 Grid 容器

只需给父容器设置 display: grid 或 display: inline-grid：

.container {
  display: grid;
}

此时，所有直接子元素就变成了“网格项”（grid items）。

2. 定义网格轨道（行和列）

使用以下属性定义网格的结构：

grid-template-columns：定义列的宽度

grid-template-rows：定义行的高度

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 3列 */
  grid-template-rows: 50px 100px;           /* 2行 */
}

也可以使用 fr 单位（表示“剩余空间的比例”）：

grid-template-columns: 1fr 2fr 1fr; /* 总共4份，中间占一半 */

还可以使用 repeat() 简写：

grid-template-columns: repeat(3, 1fr); /* 3列，每列等宽 */

3. 放置网格项

默认情况下，子元素会按顺序自动填充网格。但你可以精确控制每个项目的位置：

grid-column：指定项目占据的列范围

grid-row：指定项目占据的行范围

语法：起始线 / 结束线（结束线可省略，默认跨度为1）

<div class="container">
  <div class="item1">A</div>
  <div class="item2">B</div>
</div>
.item1 {
  grid-column: 1 / 3; /* 从第1列线到第3列线，横跨2列 */
  grid-row: 1 / 2;    /* 第1行 */
}

.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;    /* 跨越两行 */
}

4. 使用 grid-area 命名区域（更高级）

你可以为网格区域命名，然后用 grid-template-areas 直观地布局：

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr 150px;
}

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

这种方式特别适合页面整体布局（如经典的 header + sidebar + main + footer）。

三、常用属性速查

display: grid 启用网格布局

grid-template-columns / rows 定义列/行尺寸

gap（或 grid-gap） 设置行列间距

justify-items / align-items 控制网格项在单元格内的对齐方式

justify-content / align-content 控制整个网格在容器中的对齐

grid-auto-flow 控制自动放置行为（如 row, column, dense）

四、示例：简单响应式布局

<div class="grid-container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.card {
  background: #eee;
  padding: 20px;
  text-align: center;
}

这个例子会根据屏幕宽度自动调整列数，每列最小 200px，非常实用！

五、浏览器兼容性

现代浏览器（Chrome、Firefox、Safari、Edge）都已全面支持 CSS Grid（自 2017 年起）。IE 10+ 有部分支持（需加 -ms- 前缀，但不推荐用于生产）。

六、总结

Grid 适合整体页面或复杂二维布局

Flexbox 适合一维排列（如导航栏、按钮组）

实际开发中，两者常常结合使用