-第六届字节跳动青训营前端-CSS网格布局+实践

1. 简介

1.1 什么是CSS网格布局

CSS网格布局是一种基于网格的布局系统，它允许开发者以行和列的方式来构建网页布局。通过将元素放置到网格容器中的网格项目中，开发者可以轻松实现复杂的布局结构。

1.2 网格布局的优势和适用场景

  - 灵活性：网格布局允许开发者自由定义行和列的大小和位置，以适应各种不同的布局需求。
  - 响应式设计：网格布局可以很容易地创建响应式布局，使网页在不同大小的屏幕上具有良好的适应性。
  - 代码简洁：相比传统的布局方式，网格布局可以用更少的代码实现复杂的布局结构。
  - 可读性和可维护性：网格布局使用直观的行和列的表示方法，使得布局代码更易于阅读和维护。
  

1.3 兼容性考虑

CSS网格布局在现代浏览器中得到广泛支持，包括Chrome、Firefox、Safari和Edge等。然而，在一些旧版本的浏览器中可能存在兼容性问题，例如IE 11及以下版本。在使用网格布局时，需要考虑到目标用户群体的浏览器兼容性要求，针对不支持网格布局的浏览器提供适当的退化方案（如使用flex布局或传统的布局方式）。

2. 基本概念和术语

2.1 网格容器与网格项

网格容器是包含网格布局的父元素，通过设置其display属性为grid，可以将其设置为网格容器。网格项则是网格容器中的子元素，可以通过设置其属性来定义它们在网格中的位置和大小。

2.2 行和列

网格布局是由行和列组成的。行是网格容器中水平的线，列是网格容器中垂直的线。可以使用grid-template-rows和grid-template-columns属性来定义行和列的大小。

2.3 网格线和间距

网格线是行和列的分界线，可以通过为网格容器设置grid-gap属性来指定网格线之间的间距。

2.4 网格轨道和网格单元

网格轨道是行或列之间的区域，可以通过设置网格容器的grid-template-rows和grid-template-columns属性来定义网格轨道的大小。网格单元是一个网格区域中的一个单元格，可以由行和列定义。

2.5 网格区域和网格模板

网格区域是网格容器中定义的由行和列组成的矩形区域。网格模板是用于定义网格区域的规则，可以使用grid-template-areas属性来定义具体的区域布局。

3. 创建网格布局

3.1 设置网格容器

要创建一个网格布局，首先需要将其父元素设置为网格容器。可以使用以下CSS代码将div元素设置为网格容器：

<div class="grid-container">
   <div class="grid-item header">Header</div>
   <div class="grid-item sidebar">Sidebar</div>
   <div class="grid-item content">Content</div>
   <div class="grid-item footer">Footer</div>
</div>

     .grid-container {
       display: grid;
     }
     .grid-item{
       margin:30px;
       background-color:red;
     }

效果图

3.2 定义行和列

使用grid-template-rows和grid-template-columns属性来定义行和列的大小。可以使用具体的长度值（如px、rem）或百分比来定义。例如，以下代码将网格容器的行高设置为50px，列宽设置为1fr和2fr：

.grid-container {
  grid-template-rows: 50px;
  grid-template-columns: 1fr 2fr;
}

效果图

3.3 网格线的命名

可以通过为网格容器的grid-template-rows和grid-template-columns属性指定名称来为网格线命名，方便后续引用。例如，以下代码给网格线命名为header、sidebar和content：

.grid-container {
  grid-template-rows: [header] 100px [content-start] auto [content-end];
  grid-template-columns: [sidebar-start] 200px [sidebar-end] 1fr;
}

效果图

3.4 设置网格项的位置和大小

可以通过为网格项设置grid-row和grid-column属性来指定其在网格中的位置。例如，以下代码将一个网格项的位置设置为第一行第一列到第二行第二列：

.grid-item {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

3.5 网格轨道的自动调整

在网格布局中，可以使用auto关键字来让网格轨道自动调整大小以适应内容。例如，以下代码中的第一列将自动调整大小以适应内容：

.grid-container {
  grid-template-columns: auto 1fr;
}

4. 网格布局属性

4.1 网格容器的属性

4.1.1 display

   值：`grid` | `inline-grid`
   说明：用于将容器设置为网格布局，`inline-grid`可使容器在行内显示。

• 示例代码：

   .grid-container {
      display: grid;
   } 

4.1.2 grid-template-rows和grid-template-columns

   - 说明：用于定义网格容器的行和列大小，可以使用具体的长度值或百分比。
   - 示例代码：

   .grid-container {
       grid-template-rows: 50px 100px;
       grid-template-columns: 1fr 2fr;
   }

• 效果图：

4.1.3 grid-template-areas

• 说明：用于定义网格容器的区域布局，通过为网格线指定名称来表示区域。
• 示例代码：

    .grid-container {
        grid-template-areas:
        "header header"
        "sidebar content";
    }

• 效果图

4.2 网格项的属性

4.2.1 grid-row和grid-column

   - 说明：用于定义网格项在网格中的行和列位置。

• 示例代码：

  .grid-item {
      grid-row: 1 / 3;
      grid-column: 1 / 3;
  }

• 效果图

4.2.2 grid-area

   - 说明：用于同时定义网格项在行、列和区域名称中的位置。

• 示例代码：

       .grid-item {
         grid-area: 1 / 1 / 3 / 3;
       }

4.2.3 justify-self和align-self

   - 说明：用于控制单个网格项在其自身区域中的水平和垂直对齐方式。

• 示例代码：

  .grid-item {
       justify-self: center;
       align-self: end;
   }

• 效果图

4.3 网格线和间距的属性

4.3.1 grid-gap

• 说明：用于设置网格容器中的网格线之间的间 距。可以同时设置行间距和列间距，也可以分别设置。例如，以下代码将网格容器的行间距和列间距都设置为20px：

.grid-container {
  grid-gap: 20px;
}

-效果图 **

4.3.2 grid-row-gap和grid-column-gap

• 说明：分别用于设置网格容器中的行间距和列间距。

• 示例代码：

  .grid-container {
    grid-row-gap: 10px;
    grid-column-gap: 20px;
  }
  

• 效果图

总结

7.1 网格布局的优点和适用场景

• 优点：
  • 强大的布局能力，可以实现复杂的布局结构。
  • 灵活性高，适用于响应式设计。
  • 语义化，更易于理解和维护代码。
• 适用场景：适用于创建复杂的网格布局，如网站的整体布局、表格布局、导航菜单等。

7.2 网格布局与其他布局方式的比较

• 与Flexbox布局相比，网格布局更适用于复杂的布局，可以在多个维度上定义网格，实现更精确的布局控制。而Flexbox布局更适合于单一方向上的弹性布局，更适用于一维布局。
• 相比于传统的浮动布局，网格布局更直观、语义化，且不需要依赖清除浮动等技巧，更易于维护和扩展。

7.3 兼容性和浏览器支持

网格布局得到了现代浏览器的广泛支持，包括Chrome、Firefox、Safari、Edge等。适当使用前缀，可以实现对较旧的浏览器的兼容。

7.4 学习资源

如果你想深入学习网格布局，以下是一些推荐的学习资源：

• MDN Web Docs: Grid Layout（developer.mozilla.org/en-US/docs/…
• CSS Grid Layout by Example（gridbyexample.com/）
• CSS Grid Garden（cssgridgarden.com/）

希望以上信息对你有帮助！