【CSS3】grid 网格布局

网格布局 ( grid 布局 )

1. 网格容器：网格容器是所有网格项的父元素；eg: 下例中类名为 container 的 div 就是网格容器
2. 网格项：网格项是网格容器的子元素；eg: 下例中类名为 item 的 div 就是网格项

<style>
.container {
    display: grid;
}
</style>

<div class="container">
    <div class="item">网格项 1</div>
    <div class="item">网格项 2</div>
    <div class="item">网格项 3</div>
    <div class="item">网格项 4</div>
</div>

3. 网格线：构成网格结构的水平和垂直分割线就是网格线；eg: 下图中有 4 条行网格线和 4 条列网格线

4. 网格轨道：两条相邻的网格线之间的区域就是网格轨道

5. 网格单元：两条相邻的列网格线和两条相邻的行网格线围起来的就是网格单元

注意事项

• 设置 display: grid 后网格项会转换为 block
• 也可以设置 display: inline-grid，网格项就会转换成 inline-block
• 默认情况下：
  ① 网格项的宽度默认继承网格容器的 100%
  ② 若网格容器未设置高度，则网格项的高度默认由网格项自己的内容撑开；
  若网格容器已设置高度，则网格项的高度默认平分网格容器的高度
  ③ 设置后子级项目符合怪异盒模型
  ④ float、column、clear、vertical-align 等设置都对网格项失效

网格项之间的间隙

可以为网格容器设置网格线的宽度，以控制单元格之间的间隙

1. row-gap - 行网格线的宽度 - 行间隙：

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

2. column-gap 列网格线的宽度 - 列间隙：

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

3. gap - 复合写法：

gap: 20px 10px; /* 行间隙为 20px; 列间隙为 10px */
gap: 15px; /* 行间隙和列间隙都为 15px */

行高 & 列宽

grid-template-columns

• grid-template-columns 用于设置网格容器中所需的列数及每列的宽度

1. 设置定值

• 该属性接收一个或多个非负 CSS 长度值，这些值的个数就是网格容器的列数，每个值表示每列的宽度
• 宽度之间用空格分开
• 这些非负 CSS 长度值的单位可以为 px / %

grid-template-columns: 100px 100px 100px;
grid-template-columns: 80% 20%;

2. repeat() 函数

• 单位：px / %

grid-template-columns: repeat(列数, 每列的长度);

grid-template-columns: repeat(重复的次数, 第1列宽度 第2列宽度);

3. auto-fill 关键字

• 自动排满父级的宽度 (一般用于父级宽度不确定时)

grid-template-columns: repeat(auto-fill, 每列的宽度);

4. fr 关键字

• 设置了 fr 的子级按比例分配父级的宽度，可以与绝对长度的单位结合使用

grid-template-columns: 1fr 2fr;

grid-template-columns: 150px 1fr 2fr; /* 第一列为150px，剩余宽度按比例划分 */

5. auto 关键字

grid-template-columns: 100px auto 100px; /* 第二列自适应 */

6. minmax()

grid-template-columns: 1fr 1fr minmax(100px, 1fr); /* 将第三列的宽度控制在 100px~1fr 之间 */

grid-template-columns: 1fr 1fr minmax(100px, auto); /* 设置第三列的宽度 >= 100px */

7. 网格线的名称

该属性可以使用方括号来指定每一条网格线的名字，方便引用

grid-template-columns: [名称1] 第一列宽度 [名称2] 第二列宽度;

布局实例：

grid-template-columns: 70% 30%;

grid-template-columns: repeat(12, 1fr);

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自适应排列数量 */

grid-template-rows

• grid-template-rows 用于设置网格容器中每行的高度
• 与 grid-template-columns 不同，grid-template-rows 没有指定网格容器的行数
• 可用于 grid-template-rows 的属性值与 grid-template-columns 一样

grid-template-rows: repeat(2, 5px 30px);

上例设置了前 4 行的高度。若网格容器中的网格项有很多，超过了 4 行，则从第 5 行开始，行高为网格项默认高度

项目的对齐方式

当网格项的总宽高 < 网格容器的宽高时，可以通过以下属性设置网格项的对齐方式

justify-content

justify-content 用于设置网格项在水平方向上的对齐方式

1. start：从左往右
2. end：从右往左
3. center：居中
4. stretch(默认)：拉伸占据整个网格容器
   如果设置了 width，则与 start 等效
5. space-between：两端对齐，子元素之间自动留有空隙
6. space-around：父子元素之间也有空隙，为子元素之间的空隙的一半
7. space-evenly：父子元素之间的空隙 = 子元素之间的空隙

align-content

align-content 用于设置网格项在垂直方向上的对齐方式

1. start：从上往下
2. end：从下往上
3. center：居中
4. stretch(默认)：拉伸占据整个网格容器
   如果设置了 height，则与 start 等效
5. space-between：两端对齐，子元素之间自动留有空隙
6. space-around：父子元素之间也有空隙，为子元素之间的空隙的一半
7. space-evenly：父子元素之间的空隙 = 子元素之间的空隙

place-content

place-content 为 justify-content & align-content 的复合写法：

place-content: <align-content> <justify-content>;

项目内容的对齐方式

justify-items

• 水平方向：

justify-items: stretch; /* 默认拉伸，占满单元格的宽度 */

设置以下属性后，网格项的内容的宽度由内容撑开

1. start：对齐单元格的起始边缘
2. end：对齐单元格的结束边缘
3. center：单元格内部居中

align-items

• 垂直方向：

align-items: stretch; /* 默认拉伸，占满单元格的宽度 */

设置以下属性后，项目内容的高度会被压缩至 content 的高度

1. start：对齐单元格的起始边缘
2. end：对齐单元格的结束边缘
3. center：单元格内部居中

place-items

• justify-items & align-items 的复合写法：

place-items: <align-items> <justify-items>;

单个项目的内容的对齐方式 *

以下属性需要设置在指定的网格项中

justify-self

justify-self 用于设置当前网格项的内容在水平方向上的对齐方式：

1. start
2. end
3. center
4. stretch (默认)

align-self

align-self 用于设置当前网格项的内容在垂直方向上的对齐方式：

1. start
2. end
3. center
4. stretch (默认)

place-self

place-self 为 justify-self & align-self 的复合写法：

place-self: <align-self> <justify-self>;

项目的位置 & 合并 *

以下属性需要设置在指定网格项上，控制项目的位置以及大小

grid-column

grid-column 用于合并列：

grid-column-start: 网格线的序数 / 网格线的名字; /* 左边框所在的垂直网格线 */
grid-column-end: 网格线的序数 / 网格线的名字; /* 右边框所在的垂直网格线 */
grid-column: <start-line> / <end-line>; /* 合并写法，第一个数：左边序号；第二个数：右边序号 */

grid-row

grid-row 用于合并行：

grid-row-start: 网格线的序数 / 网格线的名字; /* 上边框所在的水平网格线 */
grid-row-end: 网格线的序数 / 网格线的名字; /* 下边框所在的水平网格线 */
grid-row: <start-line> / <end-line>; /* 合并写法 */

实例

grid-column: 1 / 3;
grid-row: 1 / 2;
/* 等同于 */
grid-column: 1 / span 2; /* span n 表示跨过 n 格 */
grid-row-start: 1;
grid-row-end: 2;
/* 等同于 */
grid-column: 1 / span 2;
grid-row: 1;

grid-area

grid-area 为 grid-column & grid-row 的符合写法：

grid-area: <start-line> / <end-line> / <start-line> / <end-line>;

定义网格模板

grid-template-areas

该属性需要给网格容器设置，用于定义网格的整体布局

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'header header header'
                	 'sidebar content content'
               		 'footer footer footer';

如果某些区域不需要利用，则使用 . 表示，表示没有用到该单元格，或者该单元格不属于任何区域

grid-template-areas: 'header . header'
                     'sidebar . content'
                     'footer . footer';

区域的命名会影响到网格线：每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为 区域名-end

grid-area *

• 该属性需要给网格项设置，用于定义该网格项的名称
• 设置了相应名称的网格项会移到网格布局中对应的位置上

grid-area: sidebar;

grid-auto-flow

该属性用于定义网格的排列顺序

1. row (默认)：先行后列
2. column：先列后行
3. row dense：先行后列，并且尽可能紧密填满，尽量不出现空格
4. column dense：先列后行，并且尽可能紧密填满，尽量不出现空格

grid-auto-flow: row;

隐式网格轨道

• 当我们设置的网格不足以放下所有的网格项时，就会自动出现一些网格轨道
• 这些网格轨道的高度默认是 auto 的，可以使用 grid-auto-columns grid-auto-rows 来指定网格轨道的大小

.container {
    display: grid;
    grid-auto-columns: 100px;
    grid-auto-rows: 80px;
}

上例就指定了网格轨道的宽度为 100px，高度为 80px

标题后面带 * 号的，表示该属性需要给网格项设置