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