1. 概述
CSS Grid 布局是一个强大的二维布局系统，它可以在网页上创建复杂的布局。Grid 布局允许你在水平和垂直方向上设计网页布局。
2. 基本概念
2.1 网格容器（Grid Container）
使用 display: grid; 或 display: inline-grid; 将一个元素定义为网格容器。
css
.grid-container {
display: grid;
}2.2 网格项（Grid Item）
网格容器的子元素自动成为网格项。
html
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>3. 定义网格
3.1 网格轨道（Grid Tracks）
网格轨道包含网格列和网格行。使用 grid-template-columns 和 grid-template-rows 定义网格轨道。
css
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为100px */
grid-template-rows: 50px 50px; /* 定义两行，每行高度为50px */
}3.2 网格线（Grid Lines）
网格线是网格轨道之间的分隔线。网格线从 1 开始编号。
3.3 网格区域（Grid Areas）
网格区域是由四个网格线围成的区域。使用 grid-template-areas 定义命名网格区域。
css
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
grid-template-areas:
"header header header"
"content content sidebar";
}
.grid-item.header { grid-area: header; }
.grid-item.content { grid-area: content; }
.grid-item.sidebar { grid-area: sidebar; }4. 网格项的放置
4.1 使用行号和列号放置网格项
使用 grid-column-start，grid-column-end，grid-row-start 和 grid-row-end 放置网格项。
css
.grid-item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}4.2 使用简写属性放置网格项
使用 grid-column 和 grid-row 简写属性。
css
.grid-item {
grid-column: 1 / 3; /* 从第1列开始，到第3列结束 */
grid-row: 1 / 2; /* 从第1行开始，到第2行结束 */
}4.3 使用命名网格区域放置网格项
使用 grid-area 属性放置命名网格区域的网格项。
css
.grid-item {
grid-area: header;
}5. 网格间隙（Grid Gaps）
使用 grid-gap，grid-row-gap 和 grid-column-gap 定义网格项之间的间隙。
css
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
grid-gap: 10px; /* 行间隙和列间隙都为10px */
grid-row-gap: 15px; /* 行间隙为15px */
grid-column-gap: 20px; /* 列间隙为20px */
}6. 网格对齐
6.1 对齐网格容器
使用 justify-items，align-items 和 place-items 对齐网格容器内的网格项。
css
.grid-container {
display: grid;
justify-items: center; /* 水平方向居中对齐 */
align-items: center; /* 垂直方向居中对齐 */
place-items: center; /* 水平和垂直方向居中对齐 */
}6.2 对齐网格项
使用 justify-self，align-self 和 place-self 对齐单个网格项。
css
.grid-item {
justify-self: center; /* 水平方向居中对齐 */
align-self: center; /* 垂直方向居中对齐 */
place-self: center; /* 水平和垂直方向居中对齐 */
}7. 示例代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
grid-template-areas:
"header header header"
"content content sidebar";
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 10px;
border: 1px solid #000;
}
.header { grid-area: header; background-color: #f3c; }
.content { grid-area: content; background-color: #fc3; }
.sidebar { grid-area: sidebar; background-color: #3cf; }
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item header">Header</div>
<div class="grid-item content">Content</div>
<div class="grid-item sidebar">Sidebar</div>
</div>
</body>
</html>