【CSS】Grid 布局基础知识及实例展示
CSS Grid 布局（Grid Layout）是一种二维网格布局系统，专为满足现代网页设计需求而创建。与 Flexbox（一维布局模型）不同，Grid 能够同时处理行和列，使你可以更高效地设计复杂的网页布局。下面我将从基础到高级详细讲解 Grid 布局，并提供相应示例。
基础概念
1. 容器与项目
- 网格容器（Grid Container）：通过
display: grid或display: inline-grid定义的元素，是所有网格项目的父元素。 - 网格项目（Grid Item）：网格容器的直接子元素。
2. 网格线（Grid Lines）
分隔网格轨道的分界线，可以是垂直的（列线）或水平的（行线）。网格线从 1 开始编号。
3. 网格轨道（Grid Tracks）
网格中的行或列，由 grid-template-rows 和 grid-template-columns 定义。
4. 网格单元格（Grid Cell）
两个相邻行线和两个相邻列线之间的空间，是网格的最小单位。
5. 网格区域（Grid Area）
由一个或多个网格单元格组成的矩形区域，通过 grid-template-areas 定义。
如下图：
基本用法
创建网格容器
使用 display: grid 或 display: inline-grid 将元素转换为网格容器：
css
.container {display: grid; /* 块级网格 *//* display: inline-grid; 行内级网格 */
}
定义网格轨道
使用 grid-template-rows 和 grid-template-columns 定义行和列的大小（如下图）：
css
.container {grid-template-columns: 100px 200px 150px; /* 三列，宽度分别为 100px、200px、150px */grid-template-rows: 50px 100px; /* 两行，高度分别为 50px、100px */
}
重复轨道模式
使用 repeat() 函数简化重复的轨道定义（如下图）：
css
.container {grid-template-columns: repeat(3, 100px); /* 等同于 100px 100px 100px */grid-template-rows: repeat(2, 50px); /* 等同于 50px 50px */
}
灵活的尺寸单位：fr
fr 单位表示网格容器剩余空间的比例（如下图）：
css
.container {grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列宽度是两边的两倍 */
}
网格间距
使用 gap 属性设置网格轨道之间的间距：
css
.container {gap: 10px; /* 行和列间距均为 10px *//* 等价于：row-gap: 10px;column-gap: 10px;*/
}
网格项目定位
基于网格线定位
使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 指定项目的位置：
css
.item {grid-column-start: 1;grid-column-end: 3; /* 从第1列线开始，到第3列线结束 */grid-row-start: 1;grid-row-end: 2; /* 从第1行线开始，到第2行线结束 */
}
简写形式：
css
.item {grid-column: 1 / 3; /* 列开始 / 列结束 */grid-row: 1 / 2; /* 行开始 / 行结束 */
}
使用 span 关键字跨越网格线：
css
.item {grid-column: 1 / span 2; /* 从第1列线开始，跨越2个轨道 */grid-row: 1 / span 1; /* 从第1行线开始，跨越1个轨道 */
}
网格区域定位
使用 grid-template-areas 定义区域名称，并通过 grid-area 将项目放入特定区域：
css
.container {grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 50px 200px 50px;
}.header {grid-area: header;
}.sidebar {grid-area: sidebar;
}.main {grid-area: main;
}.footer {grid-area: footer;
}
高级特性
隐式与显式网格
- 显式网格：通过
grid-template-rows和grid-template-columns定义的轨道。 - 隐式网格：当项目超出显式网格范围时，自动创建的轨道。
使用 grid-auto-rows 和 grid-auto-columns 控制隐式网格轨道的大小：
css
.container {grid-template-columns: repeat(3, 1fr);grid-auto-rows: 100px; /* 隐式创建的行高为 100px */
}
自动放置算法
使用 grid-auto-flow 控制自动放置项目的方式：
css
.container {grid-auto-flow: column; /* 项目按列排列，默认是 row */
}
对齐与分布
-
内容对齐：控制整个网格在容器中的位置
css
.container {justify-content: center; /* 水平居中 */align-content: center; /* 垂直居中 */ } -
项目对齐：控制单个项目在其单元格中的位置
css
.item {justify-self: center; /* 水平居中 */align-self: center; /* 垂直居中 */ } -
轨道分布：控制剩余空间在轨道间的分布
css
.container {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充，每列最小 100px，最大 1fr */ }
实际示例
下面是一个使用 CSS Grid 实现的响应式网页布局示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Grid Example</title><style>.container {display: grid;grid-template-areas:"header header header""sidebar main main""footer footer footer";grid-template-columns: 200px 1fr 1fr;grid-template-rows: auto 1fr auto;min-height: 100vh;gap: 10px;padding: 10px;}.header {grid-area: header;background-color: #3498db;color: white;padding: 10px;}.sidebar {grid-area: sidebar;background-color: #2ecc71;padding: 10px;}.main {grid-area: main;background-color: #f1c40f;padding: 10px;}.footer {grid-area: footer;background-color: #9b59b6;color: white;padding: 10px;}/* 响应式布局 */@media (max-width: 600px) {.container {grid-template-areas:"header""sidebar""main""footer";grid-template-columns: 1fr;grid-template-rows: auto auto 1fr auto;}}</style>
</head>
<body><div class="container"><header class="header">Header</header><aside class="sidebar">Sidebar</aside><main class="main">Main Content</main><footer class="footer">Footer</footer></div>
</body>
</html>
这个示例展示了一个常见的三栏布局，在小屏幕上自动转换为单列布局。通过 CSS Grid，我们可以轻松实现复杂的响应式设计，而不需要依赖浮动或定位。
CSS Grid 是一个功能强大的布局工具，掌握它可以让你更高效地创建现代、灵活的网页设计。建议通过实际练习来加深理解，尝试不同的属性组合，探索 Grid 布局的无限可能。