写点什么

页面怎么布局,当然是 Grid ԅ(¯﹃¯ԅ)

用户头像
空城机
关注
发布于: 2021 年 06 月 15 日
页面怎么布局,当然是Grid ԅ(¯﹃¯ԅ)

这里先问大家一个小问题,各位用中文输入法打 Grid 会出现什么呢?


在讲述Grid布局之前,先聊聊前端目前比较流行布局方式,前端开发者应该都知道Flex布局,Flex布局真的非常好用


相较于原来的Float浮动布局时代,Flex布局做到了更优解


并且在性能上,Flex布局性能也远远比Float更高,同样,Grid也是

flex 和 float 性能测试

float 布局:

<style>.test {    width: 100px;    height: 100px;    margin: 20px;    background-color: blueviolet;    float: left;  /*float布局*/}</style>
<button onclick="start()"> 开始布局 </button><div id="app"></div><script> function start() { var div = "<div class='test'></div>", dhtml = ""; for (let i = 0; i < 10000; i++) { dhtml += div; } document.getElementById("app").innerHTML = dhtml; }</script>
复制代码


布局性能:





flex 布局(修改一下 CSS):

<style>    #app {        display: flex;        flex-wrap: wrap;    }    .test {        width: 100px;        height: 100px;        margin: 20px;        background-color: blueviolet;        /* float: left; */    }</style>
复制代码


布局性能:




由上的布局时间可见,flex 布局性能更优




<br><br>

正文开始

但是说了辣么多,今天的主角确不是Flex,而是在Flex之后兴起的另一种布局Grid


[加图 没想到吧]


Grid被阮一峰大佬称为最强大的 CSS 布局方案 (哈哈哈,除了兼容性不行之外ㄟ( ▔, ▔ )ㄏ)


有理有据



因为本文是空城机边学边写的,所以推荐一些学习资料:



首先,在正式说Grid前,先说说其缺点吧,那就是兼容性过低,这一点很关键,这是其没有得到大规模推广的主要原因,另外一点就是其学习更加复杂啦


( _ _)ノ|


安利一个查询兼容性的网站: https://caniuse.com/



正如同某人说过的话,越高级的 web 技术对 IE 的兼容性越差


Grid 在 IE 浏览器中是不支持的,甚至在其他浏览器中版本需求条件也较高<br><br>

Gird 与 Flex 区别

Grid 属于网格式布局,相当于将页面划分为了一个个格子,可以当作二维布局


Flex 属于轴线布局,沿着主轴和交叉轴进行布局,可以当成一维布局


下图可以很明显看出区别:



Grid 将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了<br><br>

Grid 学习前置

在 Grid 学习前,首先要对网格状界面做一定了解

容器和项目

网格布局区域的区域被称为容器,在内部用网格定位的子元素被称为项目,Grid 布局只对项目生效


注意:项目只能是容器的顶层子元素,不包含项目的子元素 (我附庸的附庸不是我的附庸)


代码如下:

<style>    .grids {        display: grid;        width: 400px;        height: 400px;    }</style><div class="grids">    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div></div>
复制代码


行和列

既然是表格布局,那肯定会存在行和列容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)<br>

单元格

行和列的交叉区域,称为"单元格"(cell)


正常情况下,n 行和 m 列会产生 n x m 个单元格


例子:


网格线

划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列


正常情况下,n 行有 n + 1 根水平网格线,m 列有 m + 1 根垂直网格线所有总的网格线就有 n + m + 2


懒得画了 (o≖◡≖)


Grid 学习使用

师爷说的好,饭要一口口吃,路要一步步走


所以先从最简单的 grid 布局开始吧

设置 display

与 flex 类似,grid 也需要在 display 中设置 -- display: grid


display 也可以设置成 -- display: inline-grid;, 这样容器元素就从原来的块元素变成内联元素了


大家看到这,是不是有点眼熟,这就和 block 还有 inline-block很像


例子:

<style>    .grids {        display: grid;        width: 400px;        height: 400px;    }    .gridson:nth-child(1){        background-color: aquamarine;    }    .gridson:nth-child(2){        background-color: rgb(190, 201, 47);    }    .gridson:nth-child(3){        background-color: rgb(179, 51, 121);    }    .gridson:nth-child(4){        background-color: rgb(75, 28, 161);    }    .gridson:nth-child(5){        background-color: green;    }    .gridson:nth-child(6){        background-color: yellow;    }</style><div class="grids">    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div>    <div class="gridson"></div></div>
复制代码


效果:



但是这样发现子元素 gridson 并没有变成并排的表格


行列属性

上文的例子中,六个项目子元素并没有变成我想要的上三下三表格布局,这是怎么一回事?


原来是我没有设置行列属性


  • grid-template-columns 属性:定义每一列的列宽

  • grid-template-rows 属性:定义每一行的行高


例子: 修改上面的 grids 容器元素的 css 即可

.grids {    display: inline-grid;    /* width: 400px;    height: 400px;*/    grid-template-columns: 100px 180px 100px;    grid-template-rows: 100px 100px ; }
复制代码


这样一定义,就连 width 和 height 都不用设置,容器元素会随着设置的行列宽高被撑开


设置行列宽高

设置行列宽高有三种方式:1. 尺寸单位 2. 百分比 3. auto4.fr

百分比

除了使用尺寸单位,也可以 使用百分比 (注意:使用百分比需要给容器设置宽高)


width: 400px;height: 400px;grid-template-columns: 30% 40% 30%;grid-template-rows: 45% 55%;
复制代码

atuo

设置宽高为 auto 时,也需要设置容器的大小,auto 会自动平均分配剩余的大小

.grids {    display: inline-grid;    width: 400px;    height: 200px;    grid-template-columns:auto auto auto;    grid-template-rows: 50px auto;}
复制代码



fr 关键字

网格布局提供了 fr 关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为 1fr 和 2fr,就表示后者是前者的两倍。


这一点和 Flex 中的 flex-grow 很类似,使用 fr 关键字也要提前设置宽高比如:grid-template-columns:1fr 2fr 2fr;


repeat



在写比较重复的语句时,可以使用 CSS 中的 repeat()函数,此函数只能作用在 grid-template-columns 和 grid-template-rows 这两个 CSS 属性上


比如grid-template-columns: 100px 100px 100px;可以替换成 grid-template-columns: repeat(3, 100px);


repeat 函数第一个参数是重复次数,第二个参数是大小第二个参数可以传入多个值,比如repeat(2, 100px 20px 80px);




设置行列间距

行列之间默认是无缝隙间距的,但是我们可以认为的制造


grid-row-gap 属性: 设置行与行的间隔(行间距)grid-column-gap 属性: 设置列与列的间隔(列间距)grid-gap 属性:是 grid-column-gap 和 grid-row-gap 的合并简写形式


例子:

.grids {    display: inline-grid;    width: 330px;    grid-template-columns:repeat(3, 1fr);    grid-template-rows: 100px 100px;    grid-gap: 10px 15px;  /* 行列间距 */}
复制代码



grid-template-areas 合并单元格

使用 grid-template-areas 可以将单元格进行合并,然后页面布局显示更优


网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域


如果定义一个九宫格,grid-template-areas 属性可以如下设置 (在 css 中比较少见,像矩阵分布一样设置)


grid-template-areas: 'a b c'                     'd e f'                     'g h i';
复制代码


grid-template-area 可以设置某一单元格,或者多个单元格设置成相同的 class 也可以

后一个单元格内容会覆盖掉前一个单元格内容


例子:

<style>    .grids {        display: inline-grid;        width: 330px;        grid-template-columns:repeat(3, 1fr);        grid-template-rows: 100px 100px;        grid-template-areas: 'a b c'                   'd d c';        grid-gap: 10px;        text-align: center;        font-size: 30px;        color: #fff;    }    .a{        background-color: aquamarine;        grid-area: a;    }    .b{        background-color: rgb(179, 51, 121);        grid-area: b;    }    .d{        background-color: rgb(75, 28, 161);        grid-area: d;    }    .e{        background-color: green;        grid-area: e;    }    .c{        background-color: yellow;        grid-area: c;    }</style><div class="grids">    <div class="gridson a">1</div>    <div class="gridson b">2</div>    <div class="gridson c">3</div>    <div class="gridson d">4</div>    <div class="gridson d">5</div>    <div class="gridson c">6</div></div>
复制代码




好累呀,关于 Grid 布局,其实还有很多的内容可以扩展开来将,但是空城机肝不动了,暂时封刀


有趣的布局示例

首先先进行排版布局

<style>    .grids {        display: inline-grid;        width: 630px;        grid-template-columns:repeat(3, 1fr);        grid-template-rows: 180px 260px 240px;        grid-template-areas: 'a b c'                    'd d e'                    'f g g';        text-align: center;        font-size: 30px;        color: #fff;        background-color: black;    }    .a{        background-color: aquamarine;        grid-area: a;        clip-path: polygon(100% 0%, 95% 95%,0% 100%, 0% 00%, 95% 0%);        background: url(./img/4.jpg) no-repeat;        background-size: 100% 100%;    }    .b{        background-color: rgb(179, 51, 121);        grid-area: b;        clip-path: polygon(100% 0%, 95% 90%,0% 95%, 5% 0%, 95% 0%);        background: url(./img/2.jpg) no-repeat;        background-size: 100% 100%;    }    .c{        background-color: yellow;        grid-area: c;        clip-path: polygon(100% 0%, 100% 85%,0% 90%, 5% 0%, 95% 0%);        background: url(./img/3.jpg) no-repeat;        background-size: 100% 100%;    }    .d{        background-color: rgb(75, 28, 161);        grid-area: d;        clip-path: polygon(100% 5%, 100% 90%,0% 100%, 0% 12%, 100% 5%);        background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=795934161,50379971&fm=11&gp=0.jpg) no-repeat;        background-size: 100% 100%;    }    .e{        background-color: green;        grid-area: e;        clip-path: polygon(100% 2%, 100% 85%,0% 90%, 0% 5%, 100% 2%);        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1110157243,2891229005&fm=26&gp=0.jpg) no-repeat;        background-size: 100% 100%;    }    .f{        background-color: rgb(16, 42, 46);        grid-area: f;        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 5%, 100% 0%);        background: url(./img/1.jpg) no-repeat;        background-size: 100% 100%;    }    .g{        background-color: rgb(29, 216, 138);        grid-area: g;        clip-path: polygon(100% 10%, 100% 100%, 0% 100%, 0% 0%, 100% 0%);        background: url(./img/5.jpg) no-repeat;        background-size: 100% 100%;    }</style><div class="grids">    <div class="gridson a"></div>    <div class="gridson b"></div>    <div class="gridson c"></div>    <div class="gridson d"></div>    <div class="gridson e"></div>    <div class="gridson f"></div>    <div class="gridson g"></div></div>
复制代码


效果:搭建架子


使用 clip-path 裁剪路径


给项目元素中添加图片




发布于: 2021 年 06 月 15 日阅读数: 14
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步

评论

发布
暂无评论
页面怎么布局,当然是Grid ԅ(¯﹃¯ԅ)