快捷搜索:  汽车  科技

前端面试项目中用过grid吗?前端面试项目中用过grid吗

前端面试项目中用过grid吗?前端面试项目中用过grid吗flex布局是一维布局,grid布局是二维布局。我们知道flex和grid都是css3新的布局方式,如果浏览器都支持两种布局,你会选择那种呢?当我们了解两者以后就能做出正确的选择了。测试地址:https://www.caniuse.com/可以看到几大浏览器都已经支持了Grid布局,接下来我们来一步步的来玩转Grid布局grid vs flex

Grid布局概念

CSS Gird已经被W3C纳入到css3的一个布局模块中,被称为CSS Grid Layout Module,一般习惯称为网格布局

网格布局可以将应用程序分割成不同的空间,定义它们的大小、位置和层级

简单来说,网格布局就像表格一样可以让元素按对齐排列,不同的是,网格布局没有内容结构,比如一个网格布局的子元素可以定位自己的位置,可以是实现类似定位的效果。

兼容性:

前端面试项目中用过grid吗?前端面试项目中用过grid吗(1)

测试地址:https://www.caniuse.com/

可以看到几大浏览器都已经支持了Grid布局,接下来我们来一步步的来玩转Grid布局

grid vs flex

我们知道flex和grid都是css3新的布局方式,如果浏览器都支持两种布局,你会选择那种呢?当我们了解两者以后就能做出正确的选择了。

flex布局是一维布局,grid布局是二维布局。

网格容器和网格项

我们知道给一个元素设置了display:flex就指定了flex弹性布局,实现grid布局一样简单,给元素设置display:grid就可以了。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(2)

container 就是一个网格容器,里面的item就是网格项

网格术语

网格线 grid lines

网格线组成了网格,是网格水平和垂直的分界线。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(3)

网格轨道 grid track

就是两条网格线之间的空间,可以理解成表格里面的行或者列,网格里面为grid-rowgrid-column,网格轨道可以设置大小,来控制高度或者宽度。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(4)

上图grid-column2和grid-column3之间的区域就是一个网格轨道

网格单元格 grid cell

就是四条网格线之间的空间,是最小的单位。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(5)

网格区域 area

也是四条网格线组成的空间,可能包含一个或者多个单元格。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(6)

实现一个grid布局

了解网格个相关概念,接下来我们来创建一个简单的grid布局。

上面我们说网格轨道的时候说了可以给网格轨道设置大小,可以控制高度或者宽度。

前端面试项目中用过grid吗?前端面试项目中用过grid吗(7)

前端面试项目中用过grid吗?前端面试项目中用过grid吗(8)

我们来分析下上面的css

1、给grid元素设置了 display: grid来声明使用grid布局

2、使用grid-template-columns来设置列宽,分别为 300px 200px 150px

3、使用grid-template-rows来设置行高,分别为150px 100px

以上代码我们是实现了一个两行三列的grid布局,此时浏览器显示如下

前端面试项目中用过grid吗?前端面试项目中用过grid吗(9)

进阶

单位 fr

grid-template-columns和grid-template-rows不只是可以设置具体的数值,还可以设置百分比、rem一类的,还可以设置一个新单位 fr,它是来干什么的呢?

我们先把上面demo里面的css文件改下

前端面试项目中用过grid吗?前端面试项目中用过grid吗(10)

展示如下:

前端面试项目中用过grid吗?前端面试项目中用过grid吗(11)

以上实现了弹性布局,fr用来实现弹性布局 我们这里使用里repeat(2 1fr) 表示重复两次,都是1fr。

grid-gap 网格项间隙

css修改如下

前端面试项目中用过grid吗?前端面试项目中用过grid吗(12)

展示如下

前端面试项目中用过grid吗?前端面试项目中用过grid吗(13)

网格布局属性 grid-placement-properties

网格布局属性主要用来放置容器内的网格项目,就是单一项目的位置。网格布局属性主要有以下四个属性:

1、grid-column-start 设置垂直方向的开始位置网格线 2、grid-column-end 设置垂直方向的结束位置网格线 3、grid-row-start 设置水平方向的开始位置网格线 4、grid-row-end 设置水平方向的结束位置网格线

以上的简写方式

1、grid-column: grid-column-start / grid-column-end 2、grid-row: grid-row-start / grid-row-end

终极简写

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-colun-end

是不是有点蒙,我们可以大概看下,先来看deme

还是熟悉的html布局

前端面试项目中用过grid吗?前端面试项目中用过grid吗(14)

前端面试项目中用过grid吗?前端面试项目中用过grid吗(15)

先来看看我们的成果

前端面试项目中用过grid吗?前端面试项目中用过grid吗(16)

显示网格线的图片

前端面试项目中用过grid吗?前端面试项目中用过grid吗(17)

我们来分析下css

1、grid元素声明grid布局,grid-template-columns和grid-template-rows来创建一个两行三列的网格,但是渲染的结果却是三行三列,为什么?我们先接着往下分析

2、css文件中单独设置item-2网格项的位置,

grid-column-start:2 垂直线开始位置为2 grid-column-end:4垂直线结束位置为4 grid-row-start:1 水平线开始位置为1 grid-row-end:2 水平线结束位置为2

3、通过单独设置item-2的位置,把本身要在第一行的item-3给挤下来了,然后 3、4、5按照300 200 150 排列

4、这时候两件三列排列完了,但是还有个元素,此时剩下的元素就会独自占一行的位置,它的大小一样会按照网格容器定义的行高列宽来渲染

5、最后我们给item-6来设置了终极简写方式,

终极简写:行开始 / 列开始 / 行结束 / 列结束,然后我们把位置对应上

grid-area:3 / 1 / 4 / 4

通过设置网格项样式属性,我们可以就实现很多复杂的布局结构了。

几种布局

最后我们结合上面所学到的实现几个常见布局

1、左右固定,中间自适应

设置网格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就可以实现,再简单不过了

前端面试项目中用过grid吗?前端面试项目中用过grid吗(18)

效果:

前端面试项目中用过grid吗?前端面试项目中用过grid吗(19)

2、九宫格

使用grid-gap设置网格项间距 使用fr来平分

前端面试项目中用过grid吗?前端面试项目中用过grid吗(20)

显示如下

前端面试项目中用过grid吗?前端面试项目中用过grid吗(21)

3、圣杯、双飞翼

使用grid-area设置header元素和footer元素位置,结合grid-template-columns和grid-template-rows实现布局

前端面试项目中用过grid吗?前端面试项目中用过grid吗(22)

效果图:

前端面试项目中用过grid吗?前端面试项目中用过grid吗(23)

猜您喜欢: