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>© 2024 版权所有</p>
</footer>
</div>
</body>
</html>