快速上手Grid布局

Grid布局

1、基础概念

1. grid布局含义

grid布局，也被称为网格布局，是将页面中的父元素划分成一个个小的格子，然后通过这些小的格子进行合并来制作出各种不同的网站效果。

2. 如何触发网格

给父元素添加display属性，并将取值设置成grid/inline-grid
grid：代表的是块状网格，默认独占一行，类似于块级元素
inline-grid：代表的是行内块网格，于行内块元素类似

3. 触发网格有哪些特点

划分行列之后，才能将里面的区域进行划分，才能显示网格

4. gird布局与flex布局异同，网格与表格区别

grid与flex布局：
1. 相同点：都有容器和项目之分
2. 不同点：flex被称为一维布局，也叫做轴线布局；grid被称为二维布局，有行列之分。
grid与表格区别：
1. 相同点：都有行列之分，都能划分格子
2. 不同点：代码嵌套
相关概念
1. 容器：采用grid布局的父元素
2. 内容：显示项目的区域
3. 项目：grid布局中每一个格子内部放置的元素
4. 行：横向
5. 列：纵向
6. 网格线：网格布局中的横向的纵向的线条
7. 单元格：横纵线交汇的区域被称之为单元格
8. 间距：网格与网格之间的距离被称之为间距

一个m行n列的网格，需要使用m＋1条横向，n＋1条纵向网格线组成。

2、容器属性

1. 行属性和列属性

grid-template-rows：行属性
grid-template-columns：列属性
下面代码代表：
划分一个3行3列的网格，每一行行高为40px，列宽为40px。

grid-template-rows: 40px 40px 40px;
grid-template-columns: 40px 40px 40px;

在这里插入图片描述

行元素和列元素的取值：

（1）纯数值：

grid-template-rows: 40px 40px 40px;
grid-template-columns: 40px 40px 40px;

上面的就是纯数值

（2）百分比：

grid-template-rows: 40px 50% 40px;
grid-template-columns: 30% 10% 50%;

百分比和数值可以一起混合使用。

（3）重复函数
重复函数：repeat(重复次数,数值)
例如：

grid-template-rows: repeat(4,20%);
grid-template-columns: repeat(3,40px);

等同于：

grid-template-rows: 20% 20% 20% 20%;
grid-template-columns: 40px 40px 40px;

重复次数可以使用auto-fill代替：

grid-template-rows: repeat(auto-fill,30%);
grid-template-columns: repeat(3,40px);

在这里auto-fill会将列数宽度按照30%的宽度进行划分；放不下的话则不在划分列数

（4）auto自动

grid-template-rows: 40px 40px 40px;
grid-template-columns: 30px 30px auto auto 30px;

auto自动代表的是，占剩余宽度和剩余高度的所有。

（5）fr片段划分
片段划分：为例方便表示比例关系，网格布局提供了fr关键字（fraction缩写，意为“片段”），如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

grid-template-rows: 1fr 4fr 3fr;
grid-template-columns: 30px 30px auto auto 30px;

（6）minmax(num1,mun2)函数
minmax(num1,mun2)函数可以理解为最小值最大值函数，函数中两个参数：参数一代表最小值，参数二代表最大值
如果条件允许，则一直使用最大值，如果条件不允许则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值。

grid-template-rows: 1fr 4fr 3fr;
grid-template-columns: 30px minmax(10px,40px);

2. 行间距属性和列间距属性

grid-row-gap: 行间距属性
grid-column-gap: 列间距属性
在这里插入图片描述

3. 给容器中添加项目

如果想要给网格中添加项目，我们需要在容器中添加对应的div，这些div被称为项目，项目**会默认自动撑开显示在单元格内部。**添加完对应的项目之后，默认项目是横向依次有左向右进行显示，第一行显示完毕后，才会在第二行显示。
（1）调整项目显示顺序
可以使用：grid-auto-flow属性来调整项目显示顺序，有两个取值：row（横向，默认）和column（纵向）
（2）项目对齐方式
水平对齐方式：justify-items
垂直对齐方式：align-items
两个的属性值都有相同的四个：start、center、end、stretch（拉伸，默认）
复合属性place-items: align-items justify-items;
例如place-items: center end;等同于：

justify-items: end;
 align-items: center;

4. 网格在容器中的对齐方式

水平对齐：justify-content
垂直对齐：align-content
属性值除了有start、end、center之外还有：

stretch：代表拉伸默认值
space-around：行列间距环绕
space-between：行列两端对齐
space-evenly：行列间距平分

3、项目属性

1、合并单元格

合并单元格是将划分好的网格，通过让元素使用网格线站位的形式，来达到合并的效果。
可以对项目使用：
grid-column-start纵向网格线开始占位
grid-column-end纵向网格线结束占位
grid-row-start横向网格线开始占位
grid-row-end横向网格线结束占位
在这里插入图片描述
简化写法：

grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

可简化为

grid-column: 1/3;
grid-row: 1/2;