序
这里先问大家一个小问题，各位用中文输入法打 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 布局性能更优
正文开始
但是说了辣么多，今天的主角确不是Flex，而是在Flex之后兴起的另一种布局Grid
Grid被阮一峰大佬称为最强大的 CSS 布局方案 （哈哈哈，除了兼容性不行之外ㄟ( ▔, ▔ )ㄏ）
有理有据
因为本文是空城机边学边写的，所以推荐一些学习资料：
首先，在正式说Grid前，先说说其缺点吧，那就是兼容性过低，这一点很关键，这是其没有得到大规模推广的主要原因，另外一点就是其学习更加复杂啦
( ＿ ＿)ノ｜
安利一个查询兼容性的网站： https://caniuse.com/
正如同某人说过的话，越高级的 web 技术对 IE 的兼容性越差。
Grid 在 IE 浏览器中是不支持的，甚至在其他浏览器中版本需求条件也较高
Gird 与 Flex 区别
Grid 属于网格式布局，相当于将页面划分为了一个个格子，可以当作二维布局
Flex 属于轴线布局，沿着主轴和交叉轴进行布局，可以当成一维布局
下图可以很明显看出区别：
Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了
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）
单元格
行和列的交叉区域，称为"单元格"（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 并没有变成并排的表格
行列属性
上文的例子中，六个项目子元素并没有变成我想要的上三下三表格布局，这是怎么一回事？
原来是我没有设置行列属性
例子： 修改上面的 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 属性可以如下设置 <font color=#0f0>（在 css 中比较少见，像矩阵分布一样设置）
grid-template-areas: 'a b c' 'd e f' 'g h i';
复制代码
grid-template-area 可以设置某一单元格，或者多个单元格设置成相同的 class 也可以<font color=#f00>后一个单元格内容会覆盖掉前一个单元格内容
例子：
<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 裁剪路径
给项目元素中添加图片
评论