7. CSS 网格布局

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 网格布局属性详解

网格容器属性

1. display: grid：将元素定义为网格容器。

   • 示例：

     .grid-container {display: grid;
     }
     

2. grid-template-columns：定义列的布局。

   • 取值：长度值（如100px）、比例单位（如1fr）、百分比（如50%）、auto、repeat()函数等。

   • 示例：

     .grid-container {grid-template-columns: 1fr 2fr; /* 第一列占1份，第二列占2份 */
     }
     

3. grid-template-rows：定义行的布局。

   • 取值与grid-template-columns相同。

   • 示例：

     .grid-container {grid-template-rows: 100px auto; /* 第一行100px高，第二行自动分配剩余空间 */
     }
     

4. gap（或grid-gap）：设置网格项目之间的间距。

   • 取值：长度值，如10px。

   • 示例：

     .grid-container {gap: 10px; /* 设置行和列之间的间距 */
     }
     

5. 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;
     }
     

6. justify-items：定义网格项目在水平方向上的对齐方式。

   • 取值：start、end、center、stretch。

   • 示例：

     .grid-container {justify-items: center; /* 所有项目在水平方向上居中对齐 */
     }
     

7. align-items：定义网格项目在垂直方向上的对齐方式。

   • 取值与justify-items相同。

   • 示例：

     .grid-container {align-items: center; /* 所有项目在垂直方向上居中对齐 */
     }
     

8. justify-content：定义整个网格容器在水平方向上的对齐方式。

   • 取值：start、end、center、space-between、space-around、space-evenly。

   • 示例：

     .grid-container {justify-content: space-between; /* 网格在水平方向上均匀分布 */
     }
     

9. align-content：定义整个网格容器在垂直方向上的对齐方式。

   • 取值与justify-content相同。

   • 示例：

     .grid-container {align-content: space-around; /* 网格在垂直方向上均匀分布 */
     }
     

网格项目属性

1. grid-column-start和grid-column-end：定义网格项目的列起始和结束位置。

   • 示例：

     .grid-item {grid-column-start: 1; /* 列开始位置 */grid-column-end: 3; /* 列结束位置 */
     }
     

2. grid-row-start和grid-row-end：定义网格项目的行起始和结束位置。

   • 示例：

     .grid-item {grid-row-start: 1; /* 行开始位置 */grid-row-end: 3; /* 行结束位置 */
     }
     

3. grid-area：可以同时设置项目的行和列位置，结合grid-template-areas使用。

   • 示例：

     .grid-item {grid-area: header; /* 使用命名的网格区域 */
     }
     

4. justify-self：定义单个网格项目在水平方向上的对齐方式。

   • 取值与justify-items相同。

   • 示例：

     .grid-item {justify-self: end; /* 单个项目在水平方向上对齐到右边 */
     }
     

5. 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));}
}