Frontend►CSS

013-Grid布局

CSS Grid 布局详解

CSS Grid 布局是当前最强大的二维布局系统，可以同时处理行和列的布局。它彻底改变了我们创建网页布局的方式。

一、基本概念

1.1 网格容器 (Grid Container)

通过设置 display: grid 或 display: inline-grid 来定义一个网格容器。

1
2
3
.container {
  display: grid;
}

1.2 网格项 (Grid Items)

网格容器的直接子元素自动成为网格项。

1.3 网格线 (Grid Lines)

构成网格结构的分隔线，有行网格线和列网格线。

1.4 网格轨道 (Grid Track)

相邻两条网格线之间的空间，即行或列。

1.5 网格单元格 (Grid Cell)

四条网格线包围的最小单位区域。

1.6 网格区域 (Grid Area)

由一个或多个网格单元格组成的矩形区域。

二、容器属性

2.1 定义网格

1
2
3
4
.container {
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 50px 100px;
}

2.2 重复轨道

1
2
3
.container {
  grid-template-columns: repeat(3, 1fr);
}

2.3 自动填充

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

2.4 网格间距

1
2
3
4
5
.container {
  grid-gap: 10px; /* 简写 */
  row-gap: 10px;
  column-gap: 20px;
}

2.5 对齐方式

1
2
3
4
5
6
7
8
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>;
  
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

三、项目属性

3.1 项目定位

1
2
3
4
5
6
7
8
9
10
11
12
13
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  
  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  
  /* span关键字 */
  grid-column: 1 / span 2;
}

3.2 命名区域

1
2
3
4
5
6
7
8
9
10
11
.container {
  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; }

3.3 项目对齐

1
2
3
4
5
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: <align-self> <justify-self>;
}

四、实用布局示例

4.1 经典12列布局

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.col-4 {
  grid-column: span 4;
}

.col-6 {
  grid-column: span 6;
}

4.2 响应式网格

1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

4.3 圣杯布局

1
2
3
4
5
6
7
8
.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "nav content aside" 1fr
    "footer footer footer" 60px
    / 200px 1fr 200px;
}

五、Grid vs Flexbox

特性 Grid Flexbox
维度 二维布局 一维布局
应用方向 同时控制行和列 单一方向（行或列）
内容影响 容器定义结构 内容影响布局
适合场景 整体页面布局 组件内布局

六、浏览器支持

  • 所有现代浏览器全面支持
  • IE10/11支持旧版语法（需加-ms前缀）

七、最佳实践

  1. 使用fr单位创建弹性轨道
  2. 结合minmax()实现响应式
  3. 命名网格线提高可读性
  4. 使用grid-template-areas可视化布局
  5. 渐进增强：为不支持Grid的浏览器提供fallback

Grid布局提供了前所未有的布局控制能力，是构建复杂响应式布局的理想选择。