[发明专利]一种基于grid的移动端H5页面网格布局方法

说明书

本发明公开的基于grid的移动端H5页面网格布局方法，涉及网页布局领域，利用grid布局方法，将H5页面中填充的内容划分为多个格子，设置H5页面的布局方式，根据H5页面的对齐属性，设置H5页面的对齐方式，减少了代码量，降低了冗余度。

技术领域

本发明涉及网页布局领域，具体涉及一种基于grid的移动端H5 页面网格布局方法。

背景技术

在编写移动端H5页面时，通常采用纯css浮动或者flex布局的方式且只是横向一维布局，对于移动端书写的css样式，增加了代码量且冗余度较高。

发明内容

为解决现有技术的不足，本发明实施例提供了一种基于grid的移动端H5页面网格布局方法，该方法包括以下步骤：

利用grid布局方法，将H5页面中填充的内容划分为多个格子；

设置H5页面的布局方式；

根据H5页面的对齐属性，设置H5页面的对齐方式。

优选地，利用grid布局方法，将H5页面中填充的内容划分为多个格子包括：

将H5页面中根节点元素的显示属性display设置为gird。

优选地，设置H5页面的布局方式包括：

将H5页面的布局方式设置为横/竖向。

优选地，根据H5页面的对齐属性，设置H5页面的对齐方式包括：

通过对H5页面中根节点元素的对齐属性justify-items或justify-self赋予具体的参数，将H5页面的对齐方式设置为行对齐方式。

优选地，根据H5页面的对齐属性，设置H5页面的对齐方式包括：

通过对H5页面中根节点元素的对齐属性align-items或align-self 赋予具体的参数，将H5页面的对齐方式设置为列对齐方式。

优选地，所述方法还包括：

通过对H5页面中根节点元素的属性grid-template-columns赋予具体的参数，设置H5页面中网格的列数。

优选地，所述方法还包括：

通过对H5页面中子节点元素的grid-row属性赋予具体的参数，对子节点元素执行跨行操作。

优选地，所述方法还包括：

通过对H5页面中子节点元素的grid-column属性赋予具体的参数，对子节点元素执行跨列操作。

本发明实施例提供的基于grid的移动端H5页面网格布局方法，具有以下有益效果：

(1)能够对H5页面进行二维布局，更方便、直观；

(2)减少了代码量，降低了冗余度。

附图说明

图1为本发明实施例提供的基于grid的移动端H5页面网格布局方法流程示意图；

图2为本发明实施例提供的将H5页面中填充的内容划分的多个格子示意图。

具体实施方式

以下结合具体实施例对本发明作具体的介绍。

本发明提供的实施例提供的基于grid的移动端H5页面网格布局方法包括以下步骤：

S101，利用grid布局方法，将H5页面中填充的内容划分为多个格子。