CSS Grid 是比 Flexbox 更强大的布局系统，专为二维布局（行 + 列）设计。它让复杂的网页布局（如杂志排版、仪表盘）变得极其简单！

一、Grid 的核心概念

1. 什么是 Grid？

• Flexbox 是一维布局（横向或纵向排列）。
• Grid 是二维布局（同时控制行和列）。

2. 基本结构

Grid 由 Grid 容器（父元素） 和 Grid 项目（子元素） 组成：

<div class="grid-container">  <!-- Grid 容器 -->
  <div class="grid-item">1</div>  <!-- Grid 项目 -->
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;  /* 关键！让容器变成 Grid */
}

二、Grid 容器的属性（控制整体布局）

1. display: grid

• 作用：让元素变成 Grid 容器。
• 示例：css复制下载.container { display: grid; }

2. 定义行和列（grid-template-rows / grid-template-columns）

• 作用：定义网格的行高和列宽。
• 单位：px（固定值）fr（比例单位，类似 Flexbox 的 flex-grow）auto（自动调整）minmax(min, max)（最小/最大范围）

示例：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3列，比例 1:2:1 */
  grid-template-rows: 100px auto;       /* 2行，第一行固定100px，第二行自适应 */
}

3. 间距（gap）

• 作用：控制网格项目之间的间距。
• 示例：

.container { display: grid; gap: 10px; /* 行和列间距均为10px */ /* 或分开设置： */ row-gap: 10px; column-gap: 20px; }

4. 对齐方式（justify-items / align-items）

• 作用：控制所有 Grid 项目在单元格内的对齐方式。
• 可选值：start / end / center / stretch（默认）

示例：

.container {
  display: grid;
  justify-items: center;  /* 水平居中 */
  align-items: center;    /* 垂直居中 */
}

5. 自动填充（grid-auto-rows / grid-auto-columns）

• 作用：定义未显式设置大小的行/列的默认尺寸。
• 示例：

.container { display: grid; grid-auto-rows: minmax(100px, auto); /* 未定义的行至少100px，可扩展 */ }

三、Grid 项目的属性（控制单个项目）

1. 项目位置（grid-row / grid-column）

• 作用：指定项目占据哪些行/列。
• 语法：

.item { grid-row: 1 / 3; /* 从第1行到第3行 */ grid-column: 2 / 4; /* 从第2列到第4列 */ }

• 简写：

.item { grid-area: 1 / 2 / 3 / 4; /* row-start / column-start / row-end / column-end */ }

2. 命名区域（grid-template-areas + grid-area）

• 作用：用语义化名称定义布局，让代码更易读。
• 示例：

.container { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } 
.header { grid-area: header; } 
.sidebar { grid-area: sidebar; } 
.main { grid-area: main; } 
.footer { grid-area: footer; }

3. 单独对齐（justify-self / align-self）

• 作用：覆盖容器的对齐方式，单独调整某个项目。
• 示例：

.item { justify-self: end; /* 水平靠右 */ align-self: start; /* 垂直靠上 */ }

四、Grid 实战案例

案例 1：圣杯布局（Header + Sidebar + Main + Footer）

<div class="layout">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
  gap: 10px;
}

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

案例 2：响应式卡片网格（自动适应列数）

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <!-- 更多卡片... -->
</div>

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

• auto-fill：自动填充尽可能多的列。
• minmax(250px, 1fr)：每列最小250px，最大按比例分配。

五、Grid vs. Flexbox（如何选择？）

最佳实践：

• Grid 负责宏观布局（整体结构）。
• Flexbox 负责微观布局（内部组件排列）。

六、浏览器兼容性

• 现代浏览器（Chrome、Firefox、Edge、Safari）全面支持。
• 旧版 IE（11+）部分支持，需加 -ms- 前缀：

.container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; }

Grid 让复杂布局变得轻而易举！