CSS网格布局Grid

一、Grid 网格布局

1.Grid 布局基础

2.网格容器属性

3.网格项目属性

4.高级功能

5.典型应用场景

6.最佳实践

二、Flex和Grid对比

示例：

一、Grid 网格布局

CSS Grid 是一种强大的二维布局系统，能够以行和列的方式精确控制网页布局。它比传统的布局方式（如浮动、定位）更灵活、更强大，适合构建复杂的响应式网页。

1.Grid 布局基础

1. 核心概念

网格容器（Grid Container）：设置 display: grid 的元素。
网格项目（Grid Item）：容器的直接子元素。
网格线（Grid Line）：划分网格的垂直线和水平线。
网格轨道（Grid Track）：行或列的集合。
网格单元格（Grid Cell）：行和列的交叉区域。
网格区域（Grid Area）：一个或多个单元格组成的矩形区域。

2. 创建网格容器

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

2.网格容器属性

1. 定义网格轨道

grid-template-columns：定义列宽和列数。
grid-template-rows：定义行高和行数。
常用值：
- 固定值：200px、20%。
- 弹性单位：1fr（剩余空间的分配比例）。
- 函数：repeat(3, 1fr)（重复 3 列，每列宽度相等）。
- 范围：minmax(100px, 1fr)（最小 100px，最大 1fr）。

示例：

.container {display: grid;grid-template-columns: 1fr 300px;  /* 两列：第一列弹性，第二列固定 */grid-template-rows: 100px auto;     /* 两行：第一行固定，第二行自适应 */
}

2. 定义网格区域

grid-template-areas：通过命名区域定义布局。
语法：
- 每行用引号括起来，列之间用空格分隔。
- 使用 . 表示空白区域。

示例：

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

3. 网格间距

gap：定义行和列之间的间距（替代 grid-gap）。
语法：
- gap: 10px;（行和列间距均为 10px）。
- gap: 20px 30px;（行间距 20px，列间距 30px）。

示例：

.container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;  /* 行和列间距均为 20px */
}

4. 对齐方式

justify-items：所有项目的水平对齐方式（start、end、center、stretch）。
align-items：所有项目的垂直对齐方式（start、end、center、stretch）。
justify-content：整个网格的水平对齐方式（start、end、center、space-between 等）。
align-content：整个网格的垂直对齐方式（start、end、center、space-between 等）。

示例：

.container {display: grid;justify-items: center;  /* 所有项目水平居中 */align-items: end;       /* 所有项目垂直底部对齐 */
}

3.网格项目属性

1. 项目定位

grid-column-start：定义项目起始列位置。
grid-column-end：定义项目结束列位置。
grid-row-start：定义项目起始行位置。
grid-row-end：定义项目结束行位置。
简写：
- grid-column: 1 / 3;（从第 1 列到第 3 列）。
- grid-row: span 2;（占据两行高度）。

示例

2. 项目对齐

justify-self：单个项目的水平对齐方式（start、end、center、stretch）。
align-self：单个项目的垂直对齐方式（start、end、center、stretch）。

示例：

.item {justify-self: center;  /* 水平居中 */align-self: start;     /* 垂直顶部对齐 */
}

3. 项目区域

grid-area：将项目放入指定区域（对应 grid-template-areas 中的命名区域）。

示例：

.item {grid-area: header;  /* 放入名为 header 的区域 */
}

4.高级功能

1. 隐式网格

当项目超出定义的网格范围时，浏览器会自动创建隐式网格。
控制隐式网格：
- grid-auto-rows：定义隐式行的高度。
- grid-auto-columns：定义隐式列的宽度。
- grid-auto-flow：定义项目的排列方向（row、column、dense）。

示例：

.container {display: grid;grid-template-columns: repeat(2, 1fr);grid-auto-rows: 100px;  /* 隐式行高为 100px */grid-auto-flow: dense;  /* 密集排列 */
}

2. 响应式布局

auto-fit 和 auto-fill：自动适应列数。
minmax()：定义列宽或行高的范围。

示例：

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

5.典型应用场景

网页整体布局：

.container {display: grid;grid-template-areas:"header header""sidebar main""footer footer";grid-template-rows: 80px auto 100px;grid-template-columns: 200px 1fr;
}

卡片网格布局：

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

复杂报表布局：

.container {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(3, 100px);
}

6.最佳实践

命名网格线：

.container {display: grid;grid-template-columns: [start] 1fr [middle] 1fr [end];
}
.item {grid-column: start / middle;
}

渐进增强：

@supports (display: grid) {.container { display: grid; }
}

性能优化：
- 避免过度嵌套网格。
- 使用 fr 单位代替百分比实现弹性布局。

二、Flex和Grid对比

对比维度	Flex	Grid
维度	一维布局（主轴方向）	二维布局（行+列）
定位能力	只能控制单行/列	精确控制行和列的交叉定位
内容驱动	内容优先（根据内容调整布局）	容器优先（先定义网格再填充内容）
嵌套需求	需要多层嵌套实现复杂布局	单层容器即可实现复杂布局
响应式支持	需要媒体查询辅助	内置 `auto-fit`/`minmax()` 等响应式功能
浏览器支持	IE10+	IE11+（部分属性不支持）
最佳适用场景	线性排列、组件内部布局	整体页面布局、复杂网格系统

组合使用原则：
- 使用 Grid 构建宏观布局（页面整体结构）
- 使用 Flex 处理微观布局（组件内部排列）

响应式设计技巧：

/* Grid 自动适应列数 */
.container {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}/* Flex 换行布局 */
.container {display: flex;flex-wrap: wrap;gap: 20px;
}

性能优化：
- 避免过度嵌套布局
- 优先使用 gap 替代 margin 控制间距
- 使用 fr 单位代替百分比实现弹性布局

兼容性处理：

/* Flex 兼容旧版语法 */
.container {display: -webkit-flex;display: flex;
}/* Grid 渐进增强方案 */
@supports (display: grid) {.container { display: grid; }
}

Flex 是线性布局的终极解决方案，擅长处理单方向的排列对齐。
Grid 是二维布局的革命性工具，擅长构建复杂网格系统。
现代 Web 开发推荐组合：Grid 搭建骨架，Flex 填充细节。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid 布局网页示例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}/* 网格容器定义 */.container {min-height: 100vh;display: grid;grid-template-columns: 1fr; /* 移动端默认单列 */grid-template-rows: auto auto 1fr auto; /* 行定义：header nav main footer */grid-template-areas: "header""nav""main""footer";}/* 公共样式 */.header, .nav, .main, .sidebar, .footer {padding: 20px;border: 1px solid #ddd;}/* 各区域定位 */.header {grid-area: header;background: #f8f9fa;}.nav {grid-area: nav;background: #e9ecef;}.main {grid-area: main;background: #fff;}.sidebar {display: none; /* 移动端默认隐藏侧边栏 */background: #f1f3f5;}.footer {grid-area: footer;background: #212529;color: white;}/* 导航链接布局 */.nav ul {list-style: none;display: flex;gap: 20px;justify-content: center;}/* 平板及以上设备 */@media (min-width: 768px) {.container {grid-template-columns: 250px 1fr; /* 侧边栏 + 主内容 */grid-template-rows: auto auto 1fr auto;grid-template-areas: "header header""nav nav""sidebar main""footer footer";}.sidebar {display: block; /* 显示侧边栏 */}}/* 桌面设备 */@media (min-width: 1024px) {.container {grid-template-columns: 300px 1fr 300px; /* 增加侧边栏宽度 */grid-template-areas: "header header header""nav nav nav""sidebar main main""footer footer footer";}}</style>
</head>
<body><div class="container"><header class="header"><h1>网站标题</h1><p>欢迎来到我的网站</p></header><nav class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li><li><a href="#">联系</a></li></ul></nav><aside class="sidebar"><h3>侧边栏</h3><p>相关链接或广告内容...</p></aside><main class="main"><article><h2>文章标题</h2><p>这里是网页的主要内容区域...</p><!-- 更多内容 --></article></main><footer class="footer"><p>&copy; 2024 版权所有</p></footer></div>
</body>
</html>