介绍
之前写过两篇文章，别离解说了Flex布局和网格布局。而后有很多人反馈说。网格布局没有场景，学会Flex布局就能够了。
明天这篇文章就通过一个例子来解说一下网格布局的劣势。并不是说Flex布局无奈实现。而是说在某些场景下应用Flex布局逻辑会不清晰，代码会简单很多。
手机桌面的小组件
明天要举的例子就是从手机桌面下面来的。当初的手机桌面上，能够自定义的放一些App图标，也能够增加很多小组件。就拿我的苹果手机来举例。一个桌面，它会有4列的图标，而后在这些桌面上能够任意增加小组件。小组件可能是一行4列或者是两行两列等各种状况。
如果咱们用前端页面来实现这种成果的话，该怎么做呢？
Flex实现
大家能够先本人想想看这种布局用Flex该怎么实现。
如果应用Flex布局的形式来实现这个需要。咱们会发现应用Flex布局会很麻烦，须要用js去提前计算，以后行是否存在一行多列的组件，或者多行一列的组件。得出布局构造后，再去做第一层的div，以及第二层div。
这里的逻辑太麻烦，我就不写了。有趣味能够本人去尝试写写看。
Grid实现
首先会有一个父节点。他是一个是列多行的网格容器。为了防止留下空白，咱们设置主动布局算法为dense 。
<div class="grid-box" id="box"></div>上面是CSS：
.grid-box { border: 1px solid #999; width: 200px; height: 400px; display: grid; margin: 20px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; padding: 6px; grid-auto-flow: dense;}.grid-box > div { background-color: bisque; border-radius: 4px; border: 1px solid #ccc;}假如桌面的图标或小组件，能够抉择1x1，1x2，2x1，2x2四种成果。所以咱们能够先设置三种大小的子节点空间，因为默认是1x1，所以1x1不须要独自这种。有了这几个class咱们创立子节点的时候，只有往上面增加这个对应的class就能实现对应的成果。
.grid-box-item-1 { grid-column-end: span 2; /* 1x2 */}.grid-box-item-2 { grid-row-end: span 2; /* 2x1 */}.grid-box-item-3 { /* 2x2 */ grid-column-end: span 2; grid-row-end: span 2;}因为要管制随机地位，网格布局并不像Flex布局那样，能够指定子节点的程序。所以这个子节点要通过JS往容器append。
function randomItem() { let styleArr = [0,0,0,0,1,1,2,3]; let itemsEl = ''; for (let i = 0; i < styleArr.length; i++) { itemsEl += `<div class="grid-box-item-${styleArr[i]}">${i}</div>`; } boxEl.innerHTML = itemsEl;}randomItem();成果如图：
最初咱们对款式数组做一个随机。
function randomItem() { let styleArr = [0,0,0,0,1,1,2,3]; styleArr = styleArr.sort(() => { return Math.random() > 0.5 ? 1 : -1; }); // ...}当咱们每次从新调用randomItem办法之后，都会对子节点做一个随机的摆放。成果如图:
总结
还是下面的例子，如果布局构造是固定的，那么应用Flex布局其实也不简单，然而一有变动，Flex就简单了。
能够看出，应用Flex可能疾速解决大部分的场景了，这个也就是之前很多人评论的，找不到应用Grid布局的场景，没必要学Grid布局。
然而一旦遇到一些非凡不状况，不晓得Grid布局，就只能应用Flex，那么代码就会又臭又长。
完结
好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公粽号：写代码的浩，求关注 。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。