Author: Mark24
E-mail: mark.zhangyoung@gmail.com
Github: https://github.com/Mark24Code
npm: https://www.npmjs.com/package/waffle-grid-layout
npm i waffle-grid-layout
Waffle只是一个 工具css，华夫饼的图案和Grid很像都是格子
Waffle只是一个产生的背景是: 当我们的需求存在自己的设计稿，不同于没有设计稿的时候 Bootstrap、AndDesign、Tailwindcss等框架处理的问题。
再加上没有看到很好地抽离的grid布局。而且普遍是固定grid数目不适合我们灵活的需求。
所以创造了一个grid布局系统来解决这个问题。
简单有几个单独亮点，目标是：
是grid的css工具类，简化grid使用，提供二维布局能力
1. 可以指定 行列生成独特栅格化的容器，支持响应式
2. 行列跨度、偏移支持响应式
3. 默认遵循12栅格，但是提供24栅格支持。应对足够的需求。
指定grid: 指定父class为 grid 自动建立 12列 1行的 容器。
超出部分grid默认行为是拓展区域。
也可以独立指定容器栅格系统, 最大支持 col 24个，row 24个。比如这里建立 3x6的栅格
grid grid-col-6 grid-row-3
grid 属性需要一起定义在容器元素上。
响应式断点：
$grid-breakpoints: (
xs: 0,
sm: 640px,
md: 768px,
lg: 1024px,
xl: 1280px,
2xl: 1536px
) !default;
和Bootstrap不同，没有采用 g-col-sm-* 的形式, 而是采用了后缀模式： grid-col-6:md
如下代码存在 三档的响应式
grid grid-col-1 grid-row-1 grid-col-3:sm grid-row-3:sm grid-col-4:md grid-row-4:md grid-col-5:lg grid-row-4:lg
可以手动的放大缩小浏览器的宽度，体验效果
响应式断点：
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
) !default;
$gaps: $spacers !default;
可以覆盖基准或者是 映射
可以 跨列 col-6 跨行 row-6，使用grid的二维能力。最高支持24。
父容器 class='grid grid-col-6 grid-row-6'
1号元素占满一行 class="item item-1 col-6 row-1"
1号元素占满一行，8号元素占满2行，9号元素占满两列。
使用方法类似，使用后缀语法。1号元素产生响应式跨行。
class="item item-1 col-1:sm col-2:md col-3:lg col-6:xl"
可以手动的放大缩小浏览器的宽度，体验效果
元素的排列 偏移
列方向偏移 col-start-2
行方向偏移 row-start-2
item item-2 col-start-4
同样支持响应式，方法相同
$container-max-widths: (
sm: 600px,
md: 720px,
lg: 924px,
xl: 1110px,
xxl: 1320px
) !default;
可覆盖拓展