ant-design-vue栅格布局遇到的问题

栅格布局的描述：

antdv官方文档介绍
布局的栅格化系统，基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来

个人理解：类似于excel中的表格，一个一个的单元格可以进行合并，也可以进行拆分，
只不过antd每行最多24个格子，bootstrap为12个格子，通过栅格化的系统使布局更加简单，美观。

开发中的问题：

在日常的开发中，在不同的分辨率下，界面布局出现错行，原来在一行上的组件，在不同的分辨率下变成了多行。

原因分析：

造成的此问题原因主要有两个：
1、未正确使用栅格系统，在自己机器的分辨率下调整样式，例如：style=“margin-left:10px;”,造成在自己机器看着样式正常，分辨率发生变化后样式错乱
2、对栅格系统的不同分辨率划分，分辨率属性认知错误，antd栅格属性划分

xs	<576px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
sm	≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
md	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
lg	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
xl	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-
xxl	≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象	number|object	-

解决方案：

1、在不同的分辨率下设置不同的栅格数，让显示正常，pc端基本在lg,xl属性正常即可，1024 * 768,1366 * 768分辨率下，1024使用lg属性，1366使用xl属性
2、尽量取消自定义的边距样式
3、调整row上的gutter属性，调整列间距