1.引入
我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据布局，看起来像是一维布局；而grid针对布局，看起来更像是二维布局。
在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootstrap等，我们可以把栅格布局看成是类似Excel表格一样，把整个页面按照不同比例的格子划分为不同的内容，然后我们按照划分的比例，来实现页面的布局。
2.栅格布局
(1)、栅格布局中常用的样式属性
(2)、基本的栅格布局
这里我们把每一个div所占据的区域划分为一个栅格内容，按照不同的比例划分出不同比例的栅格信息，然后把整个栅格内容按照所示的内容进行一个套用。我们先把需要的模板写出来，代码和实现的效果图如下:
通过上述的布局方式，我们几乎可以布局出任何样式的h5页面，具体的布局页面我们会在后面的讲授过程中继续讲解。
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/7295.html