CSS Grid 布局：现代网页布局的强大工具CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它

CSS Grid 布局（网格布局）是 CSS 中一种强大的二维布局系统，它彻底改变了我们构建网页布局的方式。与传统的布局方法（如浮动、定位或 Flexbox）相比，Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。

一、Grid 布局的基本概念

1. 什么是 Grid 布局？

CSS Grid 是一个二维布局系统，可以同时处理行和列的布局。它允许开发者将页面划分为多个区域，并精确定位和调整这些区域的大小和位置。

2. 核心术语

Grid Container（网格容器）：应用 display: grid 的元素
Grid Item（网格项）：网格容器的直接子元素
Grid Line（网格线）：构成网格结构的分界线
Grid Track（网格轨道）：两条相邻网格线之间的空间（行或列）
Grid Cell（网格单元格）：四条网格线包围的最小单位
Grid Area（网格区域）：任意数量的网格单元格组成的矩形区域

二、创建基本 Grid 布局

1. 定义一个网格容器

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;  /* 3列，宽度分别为100px,200px,100px */
  grid-template-rows: 100px 200px;           /* 2行，高度分别为100px,200px */
  gap: 10px;                                /* 网格项之间的间距 */
}

2. 简单的网格示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列，每列等宽 */
  grid-template-rows: 100px 100px;        /* 2行，每行100px高 */
  gap: 15px;
}

.item {
  background: #4CAF50;
  padding: 20px;
  text-align: center;
}

三、Grid 布局的核心特性

1. 灵活的轨道大小

fr 单位：表示网格容器中的可用空间的一部分
minmax() 函数：定义大小范围
auto 关键字：根据内容自动调整

.container {
  grid-template-columns: 1fr minmax(200px, 1fr) 1fr;
  grid-template-rows: auto 1fr auto;
}

2. 响应式布局

.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

这个设置会创建尽可能多的 200px 宽的列来填充容器，如果空间不足则换行。

3. 网格项定位

可以精确控制网格项的位置：

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* 简写形式 */
.item {
  grid-column: 1 / 3;  /* 从第1列线到第3列线 */
  grid-row: 1 / 2;     /* 从第1行线到第2行线 */
}

/* 跨越整个网格 */
.item {
  grid-column: 1 / -1;  /* 从第1列线到最后1列线 */
}

4. 命名网格线和区域

.container {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 80px [footer-end];
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

四、Grid 布局的实际应用

1. 经典网页布局

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

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

2. 图片画廊

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

3. 产品卡片网格

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 900px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .products {
    grid-template-columns: 1fr;
  }
}

五、Grid 与 Flexbox 的比较

特性	CSS Grid	Flexbox
维度	二维（行和列）	一维（行或列）
对齐方式	同时控制行和列的对齐	一次只能控制一个方向的对齐
项目顺序	可以任意定位项目	主要通过顺序属性控制
适用场景	整体页面布局	组件内部布局
内容流	显式布局，不依赖内容顺序	依赖内容顺序

经验法则：

使用 Grid 进行宏观布局（整个页面的结构）
使用 Flexbox 进行微观布局（组件内部的排列）

六、浏览器支持与渐进增强

CSS Grid 已被所有现代浏览器支持（包括 Edge 16+）。对于旧版浏览器，可以采用渐进增强的策略：

.container {
  display: flex;          /* 回退方案 */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: initial;
  }
}

七、学习资源推荐

CSS Grid Garden - 交互式学习游戏
Grid by Example - 大量实用示例
MDN CSS Grid - 权威文档

CSS Grid 是现代网页布局的强大工具，掌握它可以显著提高你的布局效率和创造力。虽然初期可能需要一些时间适应，但一旦掌握，你将能够创建出以前需要复杂 hack 才能实现的布局效果。