拖拽设计网页布局教程(Grid模式)

背景

Grid布局 是CSS中最强大的布局系统，能完成各种复杂的布局，但其属性繁杂，还有各种简写，对与新手不太友好，所以用可视化拖拽的方式完成grid布局，并且能生成出简洁的html和css代码，让编写网页布局的效率提升10倍！

点击打开设计器：
www.lingdaima.com

布局需求如下图

先打开设计器

先从header开始

选中3个单元格，然后写个class名称，保存

调整header的高度

接下来用同样的方式完成通过拖拽调整左侧、内容、右侧区域

footer区域就很简单了，操作方式跟header一样

注意：footer和header区域的三个单元格是要合并的哦

这样就完成了，是不是很简单呢，完成后直接复制右侧的html和css代码即可。

注意复制代码后仅保留布局的格式，区域的高度是靠内容填充起来的哦

总结

此工具通过可视化的方式，快速的完成grid布局代码的生成，并且生成的代码简洁高效，对于不太熟悉布局、或经常需要写布局的攻城狮可以大大提高效率，并且保证代码高质量。