Ant Design Vue栅格Grid的使用

栅格系统的设计理念

建议横向排列的盒子数量最多四个，最少一个。
因此我们的span一般设置为3或者4
小屏幕的话就另当别论了

栅格系统的简单介绍

1.通过row在水平方向建立一组column（简写 col）
你的内容应当放置于col内，并且只有col可以作为row的直接元素。
这个非常重要

    


2.栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。

    col-12
    col-12

这个表示一行显示2列  24/12=2

3.如果一个row中的col总和超过 24.
那么多余的`col`会作为一个整体另起一行排列

4.栅格化系统支持 Flex 布局
允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。
子元素与子元素垂直方向上：支持顶部对齐、垂直居中对齐、底部对齐的方式。
同时，支持使用 order 来定义元素的排列顺序。

栅格系统的简单使用

栅格系统排列表单