Grid布局及其相关属性

一、概述

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

二、基本概念

容器与项目：

一样的容器与项目的概念，采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）, 与flex布局一样。注意：项目只能是容器的顶层子元素，不包含项目的子元素，

行和列：容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

单元格：行和列的交叉区域，称为"单元格"（cell）。

网格线：

正常情况下，n行和 m列会产生 n * m个单元格。比如，3行3列会产生9个单元格。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

三、容器属性

1、display

• 用于定义一个元素为网格容器
• 值可以是grid（块级网格容器）或inline-grid（行内级网格容器）

.grid-container {
    display: grid;
}

2、grid-template-columns 和 grid-template-rows

• grid-template-columns属性定义每一列的列宽
• grid-template-rows定义每一行的行高
• 可以使用长度值（如px、em）、百分比或fr（分数单位）来指定其大小

.grid-container {
    /* 指定了一个三行三列的网格，列宽和行高都是100px */
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

• repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

grid-template-columns: repeat(2, 100px 20px 80px);

上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。

3、grid-template-areas

• 用于定义网格区域，通过命名来布局子元素。

.grid-container {
    /* 代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格 */
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

4、grid-gap（grid-column-gap 和 grid-row-gap）

• grid-gap是grid-column-gap和grid-row-gap的简写属性，用于设置网格轨道之间的间距。

.grid-container {
    grid-gap: 10px;
    /* 等同于
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    */
}

5、justify-items

• 定义网格项在列轴上的对齐方式。
• 值可以是start、end、center、stretch。

.grid-container {
    justify-items: center;
}

6、align-items

• 定义网格项在行轴上的对齐方式。
• 值可以是start、end、center、stretch。

.grid-container {
    align-items: center;
}

7、place-items

• 是align-items和justify-items的简写属性。

.grid-container {
    place-items: center;
}

8、justify-content

• 定义整个网格在列轴上的对齐方式，当网格总大小小于容器大小时有效。
• 值可以是start、end、center、space-around、space-between、space-evenly。

.grid-container {
    justify-content: center;
}

9、align-content

• 定义整个网格在行轴上的对齐方式，当网格总大小小于容器大小时有效。
• 值可以是start、end、center、space-around、space-between、space-evenly。

.grid-container {
    align-content: center;
}

10、place-content

• 是align-content和justify-content的简写属性。

.grid-container {
    place-content: center;
}

四、项目属性

1、grid-column-start、grid-column-end、grid-row-start 和 grid-row-end

• 用于指定网格项的起始和结束位置。

.grid-item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
}

2、grid-column 和 grid-row

• 是grid-column-start、grid-column-end和grid-row-start、grid-row-end的简写属性。

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

3、grid-area

• 指定项目放在哪一个区域，也可以作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写。

.grid-item {
    grid-area: header;
    /* 或者
    grid-area: 2 / 1 / 4 / 3;
    */
}

4、justify-self

• 定义单个网格项在列轴上的对齐方式，会覆盖容器的justify-items属性。
• 值可以是start、end、center、stretch。

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

5、align-self

• 定义单个网格项在行轴上的对齐方式，会覆盖容器的align-items属性。
• 值可以是start、end、center、stretch。

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

示例：

以下是一个完整的示例代码，展示了如何使用 Grid 布局：

    
    
    
    



    

        
Header
        
Sidebar
        
Content 1
        
Content 2
        
Footer
    


    

预览效果：