为什么很少人用grid布局(grid布局和flex布局的区别)

网格概念CSS Grid已经被W3C纳入到css3的一个布局模块中，被称为CSS网格布局模块，也就是通常所说的网格布局。
网格布局可以将应用程序划分为不同的空间，并定义它们的大小、位置和层次。
简单来说，网格布局就像一个表格，它允许元素在列和行中对齐。区别在于网格布局没有内容结构。比如网格布局的子元素可以自己定位，可以达到类似的定位效果。
兼容性：
测试地址：https://www.caniuse.com/
可以看到几大主流浏览器都已经支持网格布局了。接下来，我们一步步来玩网格布局。
网格与flex
我们知道flex和grid都是css3的新布局。如果浏览器支持两种布局，你会选择哪一种？当我们知道了这两者，我们就能做出正确的选择。
Flex布局是一维布局，grid布局是二维布局。
网格容器和网格项目
我们知道为一个元素设置display:flex指定了flex灵活布局，它和实现网格布局一样简单。只需为一个元素设置display:grid。
容器是网格容器，其中的项目是网格项目。
术语网格线网格线
线构成网格，是网格的横向和纵向的分界线。
网格轨道
它是两条网格线之间的空间，可以理解为表格中的行或列。grid-row和grid-column位于网格中，可以调整网格轨迹的大小以控制其高度或宽度。
上图中grid-column2和grid-column3之间的区域是网格轨迹。
网格单元
它是四条网格线之间的空间，是最小的单位。
网格区域
它也是由四条网格线组成的空间，其中可能包含一个或多个单元。
实现网格布局
为了理解网格的相关概念，让我们创建一个简单的网格布局。
上面说网格轨迹的时候，我们说可以设置网格轨迹的大小，控制它的高度或者宽度。
我们来分析一下上面的css。
1.用display3360grid设置grid元素来声明网格布局的使用。
2.使用网格-模板-列设置列宽，分别为300px 200px 150px。
3.使用grid-template-rows设置行高，分别为150px 100px。
在上面的代码中，我们实现了一个两行三列的网格布局，浏览器显示如下
高级单元fr
Grid-template-columns和grid-template-rows不仅可以设置特定的值，还可以设置百分比、rem等，以及新的单位fr。它是做什么的？
我们先来修改一下上面演示中的css文件。
如下图所示：
以上实现了灵活布局，用fr实现灵活布局。这里我们用“repeat(2，1fr)，意思是重复两次，都是1fr。
网格-间隙网格项目间隙
Css修改如下
如下所示
网格属性网格-放置-属性
布局属性主要用于在容器中放置网格项，即单个项的位置。网格布局属性主要有以下四种属性：
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 3360 grid-row-start/grid-row-end终极缩写
网格-区域：网格-行-开始/网格-列-开始/网格-行-结束/网格-列-结束是不是有点混乱？我们可以大致看一下。先来看德美。
或者熟悉的html布局。
先来看看我们的成绩。
显示网格线图片。
让我们来分析css
1.grid元素声明grid layout、grid-template-columns和grid-template-rows来创建一个两行三列的网格，但是渲染的结果是三行三列。为什么？我们继续分析。
2.在css文件中单独设置item-2网格项的位置，
Grid-column-start33602垂直线开始位置是2grid-column-end33604垂直线结束位置是4grid-row-start33601水平线开始位置是1grid-row-end33602水平线结束位置是2 3。通过单独设置项目-2的位置，第一行中的项目-3被挤出，然后是3、4和3。
4.此时，两块三列排列，但仍有一个元素。此时，剩余的元素将单独占据一行的位置，其大小将根据grid容器定义的行高和列宽进行渲染。
5.最后，我们设置第6项的最终缩写，
终极简写：行首/列首/行尾/列尾，然后我们对应位置。
Grid-area:3/1/4/4通过设置网格项样式属性，可以实现很多复杂的布局结构。
几种布局
最后，我们结合以上所学来实现几种常见的布局。
1、左右固定，中间自适应
可以实现设置网格容器的grid-template-columns 3360 100px 1fr 100 px或者grid-template-columns 3360 100px auto 100px。不能再简单了。
效果：
2.九宫格
使用grid-gap设置网格项目间距，使用fr等分。
显示如下
3.圣杯和飞翔的翅膀
使用grid-area设置表头元素和表尾元素的位置，结合grid-template-columns和grid-template-rows实现布局。
效果图：