CSS Grid 布局完全指南

  1. 基本概念

CSS Grid 布局是 CSS 中最强大的二维布局系统，它允许我们通过行和列的方式来创建复杂的网页布局。

核心特点：
• 二维布局：同时控制行和列

• 精准定位：可以精确控制每个网格项的位置

• 响应式友好：轻松创建适应不同屏幕尺寸的布局

• 代码简洁：减少布局所需的HTML结构和CSS代码

  1. 基础语法

2.1 创建网格容器

1
2
3
.container {
  display: grid; /* 或 inline-grid */
}

2.2 定义网格轨道

1
2
3
4
.container {
  grid-template-columns: 100px 200px 1fr; /* 3列 */
  grid-template-rows: 50px auto 100px; /* 3行 */
}
  1. 网格属性详解

3.1 容器属性

属性 描述 示例
grid-template-columns 定义列宽 repeat(4, 1fr)
grid-template-rows 定义行高 100px minmax(200px, auto)
grid-template-areas 定义命名网格区域 "header header" "sidebar main"
gap 网格间距 gap: 20px 10px (行 列)
justify-items 网格项水平对齐 `start
align-items 网格项垂直对齐 `start
grid-auto-flow 自动放置算法 `row

3.2 网格项属性

属性 描述 示例
grid-column 跨列控制 1 / 3 或 span 2
grid-row 跨行控制 2 / 4 或 span 3
grid-area 指定命名区域 header
justify-self 单项水平对齐 `start
align-self 单项垂直对齐 `start
  1. 实用布局模式

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;
}

.item-4col {
  grid-column: span 4; /* 占4列 */
}

.item-6col {
  grid-column: span 6; /* 占6列 */
}

4.2 响应式网格

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

4.3 大屏仪表盘布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.dashboard {
  display: grid;
  grid-template:
    "header header header" 80px
    "sidebar chart chart" 1fr
    "sidebar stats stats" auto
    / 250px 1fr 1fr;
  gap: 20px;
  height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.chart { grid-area: chart; }
.stats { grid-area: stats; }
  1. 高级技巧

5.1 隐式网格

1
2
3
4
.container {
  grid-auto-rows: 100px; /* 隐式行高 */
  grid-auto-columns: 1fr; /* 隐式列宽 */
}

5.2 重叠元素

1
2
3
4
5
6
7
8
9
10
11
.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 1;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1;
  opacity: 0.8;
}

5.3 子网格

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

.item {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格 */
  grid-column: span 2;
}
  1. 最佳实践
  2. 命名网格线提高可读性：
1
grid-template-columns: [start] 1fr [center] 1fr [end];
  1. 结合CSS变量实现动态布局：
1
2
3
4
5
6
:root {
  --columns: 4;
}
.grid {
  grid-template-columns: repeat(var(--columns), 1fr);
}
  1. 渐进增强策略：
1
2
3
4
5
6
7
8
9
10
.item {
  float: left; /* 旧浏览器回退 */
  width: 25%;
  
  @supports (display: grid) {
    float: none;
    width: auto;
    grid-column: span 1;
  }
}
  1. 浏览器支持

• 所有现代浏览器完全支持（包括Edge 16+）

• IE10/11支持旧版语法（加-ms-前缀）

• 推荐使用Autoprefixer处理兼容性

  1. 学习资源
  2. CSS Tricks Grid完全指南
  3. MDN Grid布局
  4. Grid by Example

这份文档涵盖了CSS Grid的核心知识点，建议保存为Markdown文件(.md)以便随时查阅。需要任何部分的详细解释或具体示例，可以随时告诉我！