关于前端:有时候用Grid布局很简单

介绍

之前写过两篇文章，别离解说了 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;
}

假如桌面的图标或小组件，能够抉择 1 ×1，1×2，2×1，2×2 四种成果。所以咱们能够先设置三种大小的子节点空间，因为默认是 1 ×1，所以 1 ×1 不须要独自这种。有了这几个 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，那么代码就会又臭又长。

完结

好了，本文到此结束，心愿本文对你有所帮忙 :-)
最近新弄了一个公粽号：写代码的浩，求关注 😄。前面会逐渐把把握的前端常识以及职场常识积淀下来。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。