CSS3引入了强大的网格布局（Grid Layout），它提供了一种二维的布局方式，使得创建复杂的网页布局变得更加简单和直观。通过定义行和列，我们可以精确控制网页元素的排列和对齐。本章将详细介绍网格布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用网格布局。
7.1 网格布局简介
网格布局是一种二维布局系统，允许我们在水平和垂直两个方向上定义布局。它由网格容器（grid container）和网格项目（grid item）组成。网格布局非常灵活，适合创建复杂和响应式的网页设计。
特点
- 二维布局：同时控制行和列的排列。
- 灵活的尺寸：使用网格单元和轨道，可以创建灵活的布局。
- 简化复杂布局：能够轻松实现传统布局方法中难以实现的设计，如垂直居中、等高列等。
7.2 网格容器与项目
网格容器是应用网格布局的元素，网格项目是网格容器内的直接子元素。
示例
<div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div>
</div>
.grid-container {display: grid; /* 定义网格容器 */grid-template-columns: repeat(2, 1fr); /* 定义两列，每列占1fr（比例单位） */grid-template-rows: repeat(2, 100px); /* 定义两行，每行100px高 */gap: 10px; /* 设置行和列之间的间距 */
}.grid-item {background-color: #3498db;color: white;padding: 20px;text-align: center;
}
7.3 网格布局属性详解
网格容器属性
-
display: grid：将元素定义为网格容器。-
示例：
.grid-container {display: grid; }
-
-
grid-template-columns：定义列的布局。-
取值：长度值（如
100px）、比例单位（如1fr）、百分比（如50%）、auto、repeat()函数等。 -
示例：
.grid-container {grid-template-columns: 1fr 2fr; /* 第一列占1份，第二列占2份 */ }
-
-
grid-template-rows：定义行的布局。-
取值与
grid-template-columns相同。 -
示例：
.grid-container {grid-template-rows: 100px auto; /* 第一行100px高，第二行自动分配剩余空间 */ }
-
-
gap（或grid-gap）：设置网格项目之间的间距。-
取值：长度值，如
10px。 -
示例：
.grid-container {gap: 10px; /* 设置行和列之间的间距 */ }
-
-
grid-template-areas：定义命名的网格区域。-
示例：
.grid-container {grid-template-areas:"header header""sidebar content""footer footer"; } .header {grid-area: header; } .sidebar {grid-area: sidebar; } .content {grid-area: content; } .footer {grid-area: footer; }
-
-
justify-items：定义网格项目在水平方向上的对齐方式。-
取值：
start、end、center、stretch。 -
示例：
.grid-container {justify-items: center; /* 所有项目在水平方向上居中对齐 */ }
-
-
align-items：定义网格项目在垂直方向上的对齐方式。-
取值与
justify-items相同。 -
示例：
.grid-container {align-items: center; /* 所有项目在垂直方向上居中对齐 */ }
-
-
justify-content：定义整个网格容器在水平方向上的对齐方式。-
取值：
start、end、center、space-between、space-around、space-evenly。 -
示例：
.grid-container {justify-content: space-between; /* 网格在水平方向上均匀分布 */ }
-
-
align-content：定义整个网格容器在垂直方向上的对齐方式。-
取值与
justify-content相同。 -
示例：
.grid-container {align-content: space-around; /* 网格在垂直方向上均匀分布 */ }
-
网格项目属性
-
grid-column-start和grid-column-end：定义网格项目的列起始和结束位置。-
示例：
.grid-item {grid-column-start: 1; /* 列开始位置 */grid-column-end: 3; /* 列结束位置 */ }
-
-
grid-row-start和grid-row-end：定义网格项目的行起始和结束位置。-
示例：
.grid-item {grid-row-start: 1; /* 行开始位置 */grid-row-end: 3; /* 行结束位置 */ }
-
-
grid-area：可以同时设置项目的行和列位置，结合grid-template-areas使用。-
示例：
.grid-item {grid-area: header; /* 使用命名的网格区域 */ }
-
-
justify-self：定义单个网格项目在水平方向上的对齐方式。-
取值与
justify-items相同。 -
示例：
.grid-item {justify-self: end; /* 单个项目在水平方向上对齐到右边 */ }
-
-
align-self：定义单个网格项目在垂直方向上的对齐方式。-
取值与
align-items相同。 -
示例：
.grid-item {align-self: start; /* 单个项目在垂直方向上对齐到顶部 */ }
-
7.4 创建复杂网格布局
网格布局能够轻松创建复杂的网页布局，例如响应式的页面结构和仪表板布局。
示例：响应式三栏布局
<div class="complex-grid"><div class="header">Header</div><div class="sidebar">Sidebar</div><div class="content">Content</div><div class="footer">Footer</div>
</div>
.complex-grid {display: grid;grid-template-areas:"header header header""sidebar content content""footer footer footer";grid-template-columns: 1fr 2fr 1fr;grid-template-rows: auto 1fr auto;gap: 10px;
}.header {grid-area: header;background-color: #3498db;color: white;text-align: center;padding: 20px;
}.sidebar {grid-area: sidebar;background-color: #2ecc71;color: white;padding: 20px;
}.content {grid-area: content;background-color: #e74c3c;color: white;padding: 20px;
}.footer {grid-area: footer;background-color: #9b59b6;color: white;text-align: center;padding: 20px;
}
7.5 网格布局与响应式设计
网格布局与媒体查询结合使用，可以创建响应式设计，适应不同的屏幕尺寸和设备。
示例：响应式网格布局
<div class="responsive-grid"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div>
.responsive-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));gap: 10px;
}.item {background-color: #3498db;color: white;padding: 20px;text-align: center;
}/* 媒体查询，适配不同屏幕尺寸 */
@media (max-width: 600px) {.responsive-grid {grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));}
}
