背景
Grid布局 是CSS中最强大的布局系统，能完成各种复杂的布局，但其属性繁杂，还有各种简写，对与新手不太友好，所以用可视化拖拽的方式完成grid布局，并且能生成出简洁的html和css代码，让编写网页布局的效率提升10倍！
布局需求如下图
先打开设计器
先从header开始
选中3个单元格，然后写个class名称，保存
选
调整header的高度
接下来用同样的方式完成通过拖拽调整左侧、内容、右侧区域
footer区域就很简单了，操作方式跟header一样
注意：footer和header区域的三个单元格是要合并的哦
这样就完成了，是不是很简单呢，完成后直接复制右侧的html和css代码即可。
注意复制代码后仅保留布局的格式，区域的高度是靠内容填充起来的哦
总结
此工具通过可视化的方式，快速的完成grid布局代码的生成，并且生成的代码简洁高效，对于不太熟悉布局、或经常需要写布局的攻城狮可以大大提高效率，并且保证代码高质量。
