俗话说，人要脸，树要皮。
古往今来从未像现如今这样全民热衷于看脸，没点颜值差点姿色你都不好意思直播带货。
可惜不得不承认的是，有些人的高颜值是与生俱来的，就看这父母手艺的高低了。
的确，这么大一张脸上，要想颜值暴表这五官的摆放首先就显得极为重要。
而在WEB江湖中，经过多位前辈的努力于是乎也派生出一门WEB界面风水学，叫作 Grid & Layout 。
有人说了，你整这英文洋字码我倒是认识几个，可拼在一块儿我咋就看不懂了呢，啥意思啊？
其实把它翻译过来就是 栅格 和 布局 的意思，那具体啥意思？
别急，这正是我们接下来要慢慢道来的WEB前端框架之一 View UI 的界面风水学。
第二弹：栅格
友情提示：
在接下来的学习演示中，为保证测试速度和效果，建议将 View UI 及其所需库文件下载到本地。
可以到本经验教程的前一篇下载所有库文件，或在文末下载本文的示例文件。
前文参考阅读：
年轻的小伙伴们，你们见过老式电视机或大屁股显示器吗？
它们显示图像的原理之一就是从左到右、自上而下地逐行扫描像素点。
扫描完第一行后，回到最左边再扫描第二行，直到底部完成扫描，最终形成一幅完整的图像。
View UI 采用的是24栅格系统，就是将你能看到的页面窗口竖着等分为24列，然后将这24列组合成任意宽度的内容即可。
因此你可以简单地理解为，在WEB页面上，任何一行都最多只有24个像素点，这个像素点就叫最小分隔列。
然后从页面左上角开始，按像素点位置水平向右依次摆放多个列单元内容，放满24个最小分隔列后，再从下一行的最左侧开始水平向右再依次摆放内容，以此类推。
你看，是不是像极了逐行扫描啊？
如果你有 Bootstrap 的学习经验，会更好理解一些，只不过 View UI 把列数分得更多了一些。
就像下图这个样子，每一行内容可以分为若干个列，最多可分成相等宽度的24列。
比如，想显示的内容就单独占一列，那就是 24 ；
分成等分的两列，那就是 12+12 ；
分成等分的3列，就是 8+8+8 。
可以理解吧？
当然了，你也可以分成不等分的比如 16+8 或 6+8+10 等等，只不过这些数字相加结果务必要等于24。
那位说了，先等分24列，然后将这24列组合成我想要的各种不同宽度的列，这个我懂了，但这个行内容怎么控制的？
其实我们前面说的什么等分也好，24列也好，其实是针对一行内容讲的。
如果有多行，那么就要每一行都做到24列合理分配，如果占用超过24则自动换到下一行。
而每一行的高度是另外通过样式实现的，具体后面有讲。
一、最基本的一行和它的多列
原理我们大概了解了，那么实际怎么用代码实现呢？
很简单，三个标记，三句话：
- 使用
row标记创建水平方向上的一行 - 使用多个
col标记插入到row中形成多个列 - 使用
span标记分别标识每个col的列宽
最最基本的代码如下。
如果你像我一样使用 CDN 方式引入的 View UI ，那么需要注意，非 template/render 模式下，需使用 i-col 。
<Row>
<i-col span="7">
我是第一列，我占用了7个最小分隔
</i-col>
<i-col span="8">
我是第二列，我占用了8个最小分隔
</i-col>
<i-col span="9">
我是第三列，我占用了9个最小分隔
</i-col>
</Row>
可以看到，这同一行的三列分隔总和是24。
如果需要显示多行内容，那么就按照上面的例子一样写上多个 row+col 组合即可。
图中的横线是我加上的，为的是让小伙伴们看得更清楚。
不过你也应该注意到，虽然按指定的宽度分隔了每列的内容，但是每列之间的内容似乎粘连在了一起，看起来能让强迫症尴尬死有木有？
别慌，我有特效药！
二、用<列间隔>保持列与列之间的距离
row 有一个参数可以让每列之间保持一定的间距，这个特效药叫作 gutter 。
由于栅格系统按24等分来分隔，所以官方推荐使用 (16+8n)px 作为栅格间隔，也就是说 gutter 的值建议取 16 、24 或 32 等等。
只要在 row 后面加上个 gutter 就可以产生效果，像这样子：
<Row :gutter="16">
<i-col span="8">
<div style="background:#ff9900;"><我是第一列，我占用了8个最小分隔></div>
</i-col>
<i-col span="4">
<div style="background:#ff9900;"><我是第二列，我占用了4个最小分隔></div>
</i-col>
<i-col span="3">
<div style="background:#ff9900;"><我是第三列，我占用了3个最小分隔></div>
</i-col>
<i-col span="9">
<div style="background:#ff9900;"><我是第四列，我占用了9个最小分隔></div>
</i-col>
</Row>
这里要注意，千万不要把 Row 写成 i-row ，可不要犯了我以前犯过的低级错误哦！
从效果图上看，每一列之间都有一定的间隔，看起来舒服多了吧。
哎，眼尖的小伙伴们会发现，为啥给块块们涂上了颜色？
实际上，这个间隔是通过 padding 来实现的，只有给 col 里面的 div 加上背景颜色才能看出效果，如果是给 col 直接加背景则会看不出任何效果，因为间隔还是属于 col 的部分哦，这一点需要多多注意哦！
三、用布局模式让行列活起来
我们可以看到我们用颜色区分出来的被分隔的内容块，那么这些块块能不能不要这么死板，让它们活泼一些不要都是一个样子不好吗？
答案是肯定的哈！
其实可以使用 row 的 flex 布局模式配合一些样式来达到我们想要的效果。
官网有很多举例，什么上下左右居中对齐，在此只举一个简单例子：
<Row type="flex" justify="center" align="middle" class="code-row-bg">
<i-col span="5">
<div style="background:#808695;"><p style="height: 80px"><我是第一列，我占用了5个最小分隔，我的身高是80px></p></div>
</i-col>
<i-col span="5">
<div style="background:#808695;"><p style="height: 30px"><我是第二列，我占用了5个最小分隔，我的身高是30px></p></div>
</i-col>
<i-col span="5">
<div style="background:#808695;"><p style="height: 100px"><我是第三列，我占用了5个最小分隔，我的身高是100px></p></div>
</i-col>
<i-col span="5">
<div style="background:#808695;"><p style="height: 60px"><我是第四列，我占用了5个最小分隔，我的身高是60px></p></div>
</i-col>
</Row>
同样加上颜色也是为了看得清楚一些，总之，高矮胖瘦、上窜下跳，你想怎么摆就可以怎么摆。
呃...哎？不对啊！
你不是说一行一共是24分隔嘛，怎么这四个5加起来才20，不够24啊？
哈哈，这是因为为了让小伙伴们看得清楚，让这一行中的所有块块都居中、两边留空，所以故意少了一些啊。
能看出问题来，说明小伙伴们的确很认真啊！
冲你们这个学习劲头，给你们点24个赞哈！
四、多行怎么做
这时，可能又会有小伙伴举起小手提问了，列间隔有了，花样还不少，那行与行之间呢？
这个问题提的好，一般最简单地我是通过换行标签 <br> 来实现的。
比如：
<Row>
...
</Row>
<br>
<Row>
...
</Row>
<br>
<Row>
...
</Row>
若想行间距大一些，那么多加几个 <br> 就行了。
就是辣么简单粗暴啊，一般对于小白够用就行。
另外需要重点补充一点，我们说的一行24列，这个一行并不仅仅指的是屏幕页面的一行，它也可以是页面某个区域的一行。
比如像下图这个样子，header 或 content 等部分都可以是栅格系统的摆放区域：
栅格系统是界面最基础的概念之一，把握好其原理和使用方法，对今后的界面布局将大有裨益。
今天介绍的内容经过精简，做到了最最基础、容易上手，属于经验之谈，希望对小伙伴们有所帮忙！
有了栅格系统的基础就可以更深入地去了解布局了。
下一回，我们接着聊！
本文相关文件下载：
vue.min.js.7z：https://o8.cn/4JnupS 密码：zyc8
ViewUI-4.3.2.zip：https://o8.cn/ilEeNU 密码：88pi
test02.7z：https://o8.cn/Du5mwg 密码：4633
WeChat @网管小贾 | www.sysadm.cc
