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.典型应用场景

1. 网页整体布局：

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

2. 卡片网格布局：

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

3. 复杂报表布局：

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

---

6.最佳实践

1. 命名网格线：

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

2. 渐进增强：

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

3. 性能优化：

   • 避免过度嵌套网格。

   • 使用 fr 单位代替百分比实现弹性布局。

---

二、Flex和Grid对比

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

1. 组合使用原则：

   • 使用 Grid 构建宏观布局（页面整体结构）

   • 使用 Flex 处理微观布局（组件内部排列）

2. 响应式设计技巧：

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

3. 性能优化：

   • 避免过度嵌套布局

   • 优先使用 gap 替代 margin 控制间距

   • 使用 fr 单位代替百分比实现弹性布局

4. 兼容性处理：

   /* 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>