CSS教程（第七章）：CSS Grid布局

在CSS中，Grid（网格）布局是一个二维布局系统，用于在网页上创建复杂的布局结构。与传统的布局方法（如Flexbox）相比，Grid布局更加灵活和强大，可以让我们轻松实现跨行跨列的复杂布局。

一、Grid布局的基本概念

Grid布局包含两个主要的概念：Grid容器（Grid Container）和Grid项目（Grid Item）。

• Grid容器：是一个设置了display属性为grid或inline-grid的元素。Grid容器内部会定义网格的行（Row）和列（Column），Grid项目则会根据这些行和列进行布局。
• Grid项目：是Grid容器中的子元素，它们会成为网格中的一部分，并按照Grid容器的定义进行布局。

二、Grid容器的属性

1. display：用于定义一个元素是否为Grid容器。可取值包括grid（块级容器）和inline-grid（行内容器）。

   .container {  
     display: grid;  
   }

    

2. grid-template-columns 和 grid-template-rows：用于定义Grid容器的列和行的尺寸。可以使用具体的尺寸值（如px、%等），也可以使用fr单位（Fractional Unit，表示等分空间）。

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

    

3. grid-template-areas：用于通过命名的方式定义Grid容器的区域（Area），可以更方便地进行布局和样式设置。

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

    

4. grid-gap（或grid-row-gap 和 grid-column-gap）：用于设置Grid项目中行和列之间的间隔。

   .container {  
     grid-gap: 10px; /* 简写属性，等同于 grid-row-gap 和 grid-column-gap */  
   }

    

5. justify-items、align-items、justify-content 和 align-content：这些属性用于控制Grid项目的对齐方式。它们的行为与Flexbox中的对应属性类似，但作用在二维网格上。

三、Grid项目的属性

1. grid-column 和 grid-row：用于指定Grid项目应放置在Grid容器的哪个列和行上。可以使用数字索引、列/行名称或span关键字来跨越多个网格轨道。

   .item {  
     grid-column: 2 / span 2; /* 放置在第二列，并跨越两列 */  
     grid-row: 1; /* 放置在第一行 */  
   }

    

2. grid-area：用于指定Grid项目应放置在Grid容器的哪个区域中。这个属性与grid-template-areas配合使用。

   .header {  
     grid-area: header;  
   }

    

3. justify-self 和 align-self：用于覆盖Grid容器的对齐设置，为单个Grid项目指定对齐方式。

   .item {  
     justify-self: end; /* 右侧对齐 */  
   }

    

四、Grid布局的使用场景

Grid布局非常适合用于以下场景：

• 创建复杂的二维布局结构，如网页中的头部、主体、侧边栏和页脚等。
• 创建等宽或等高的列或行，实现响应式布局。
• 创建复杂的表格布局，如日历、数据表格等。
• 跨行跨列的复杂布局，如创建复杂的卡片、海报等。

五、注意事项

• Grid布局是一个相对较新的CSS特性，因此在某些老版本的浏览器中可能不被支持。在使用Grid布局时，需要确保目标浏览器支持该特性。
• 在使用Grid布局时，需要注意Grid容器和Grid项目的层次关系，以及它们之间的尺寸和对齐设置。
• Grid布局提供了很多强大的功能，但也需要谨慎使用，避免过度复杂和冗余的布局结构。