Grid布局
1、基础概念
1. grid布局含义
grid布局,也被称为网格布局,是将页面中的父元素划分成一个个小的格子,然后通过这些小的格子进行合并来制作出各种不同的网站效果。
2. 如何触发网格
给父元素添加display
属性,并将取值设置成grid/inline-grid
grid
:代表的是块状网格,默认独占一行,类似于块级元素
inline-grid
:代表的是行内块网格,于行内块元素类似
3. 触发网格有哪些特点
划分行列之后,才能将里面的区域进行划分,才能显示网格
4. gird布局与flex布局异同,网格与表格区别
- grid与flex布局:
- 相同点:都有容器和项目之分
- 不同点:flex被称为一维布局,也叫做轴线布局;grid被称为二维布局,有行列之分。
- grid与表格区别:
- 相同点:都有行列之分,都能划分格子
- 不同点:代码嵌套
- 相关概念
- 容器:采用grid布局的父元素
- 内容:显示项目的区域
- 项目:grid布局中每一个格子内部放置的元素
- 行:横向
- 列:纵向
- 网格线:网格布局中的横向的纵向的线条
- 单元格:横纵线交汇的区域被称之为单元格
- 间距:网格与网格之间的距离被称之为间距
一个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;