Grid简介，一个基于JS快速生成各种网格布局的工具。看了几篇博客，了解了它的几个常用属性，就可以快速生成网格布局了。与传统的浮动、定位等相比，更加系统化、规范化，不需要一些hack。虽然网格布局已经很好了，但是有些前端工程师更喜欢动态创建div，用js给div设置样式来完成他们的工作。同样出于使用JavaScript动态生成网格布局的需要，诞生了Grid.js这个小工具。网格介绍Grid.js是一个使用JavaScript动态创建规则网格布局和不规则网格布局的模块。FE可以通过newGrid(option)创建一个Grid实例，这个实例的UI会呈现为css网格布局。效果图首先，让我们看一些使用Grid.js生成的效果图。下面四个效果图的父容器大小都是600*600像素。第一个是4X4的格子，其中3个格子是非原子的（1X1），即2X2、2X2、2X1。第二个是5X5规则网格。所谓规则网格，就是所有子元素的大小都是1X1。第三张纸是一个6X5网格，有5个非原子大小的网格。第四张纸是一个7X7网格，有4个非原子大小的网格。Grid.js使用Grid.js使用es6类语法，所以使用非常简单。可以通过newGrid(option)生成网格实例。就效果图第二张生成的5X5格子而言，它的代码是：letgrid=newGrid({container:document.getElementsByClassName('grid')[0],//RequireditemcolCount:5,行数:5,宽度:600,高度:600,});如果想为每个网格设置不同的样式，可以使用外部API方法setGridStyleByIndex()；同样以效果图的5X5格子为例，对角线上的五个格子都是背景的样式，它们是通过如下代码完成的：grid.setGridStyleByIndex(0,{"background":"red"});grid.setGridStyleByIndex(6,{"background":"green"});grid.setGridStyleByIndex(12,{"background":"yellow"});grid.setGridStyleByIndex(18,{"background":"blue"});grid.setGridStyleByIndex(24,{"background":"orange"});另一个问题是如何获取每个子元素（小格子）的引用？通过外部API方法getGrid(n)。另一个问题是如何获取对所有子元素（小网格）的引用？通过外部API方法getGrids()。letgrids=grid.getGrids();for(leti=0;i
