Vuetify 是个风格简明、功能齐全的组件库，但是官方文档的许多部分语焉不详，我个人花了很长时间才理解了 Vuetify 栅格系统的基本用法。因此，我会在本文介绍其栅格系统的几个基础特性，希望能帮助使用者快速入门。
栅格系统是干什么的？
考虑到完全没有经验的小白，本文的前两节用来简要介绍栅格系统的思想。如果觉得太啰嗦的话，请直接跳到下方的代码部分。
栅格系统的最大用处，就是提供一种将布局快速转换为代码的手段。比如说，现在我们接到了编写首页的任务，需要在前端实现这样的代码：
如果让缺乏 CSS 经验的人来写，那写出来的样子很可能是：
这样的布局和我们一开始构想的布局有什么不同呢？我们来逐条分析一下：
- 我们希望「标题」能够正好盖住下面的两块内容，但是现在标题栏的宽度不正确；
- 我们希望「侧边栏」和「主要内容」一样高，但是侧边栏的内容往往比正文少，造成了高度的不一致；
- 我们希望「底部按钮」放在「主要内容」以下居右摆放，但是现在这样太靠右了。
这怎么办呢？要描述这样的布局规则，除了手写 CSS 之外，使用栅格系统也是一种很好的选择。
栅格系统：「行」与「列」
为了让这样的布局写起来轻松一点，栅格系统引入了「行」与「列」的概念。
在用栅格系统实现一个布局的时候，首先，我们可以想象我们手里拿着一把刀，把网页布局横着切开，切成了一行一行的样子；在栅格布局中，每一行都是等宽的。接下来，我们小心翼翼地拿着这把刀，把已经切开的布局再竖着切，把每一行分成若干个列。不论怎么切，每一个列的高度也都是相同的，这样就能描述我们想要的布局了。
例如，上面我们提到的首页布局，可以切分成这个样子：
这样一来，我们在上文中所提到的要求就全部满足了：
- 因为栅格中每一行等宽，所以「标题」的宽度恰好等于「侧边栏」+「主要内容」的宽度；
- 因为每一列高度相同，所以「侧边栏」的高度也和「主要内容」一致了；
- 把布局切分成多行之后，「底部按钮」自然也不会飘到「主要内容」的右边去了。
使用 Vuetify 的栅格系统
1. 编写行
了解了「行」和「列」的概念之后，接下来就要用代码来实现了。其实 Vuetify 的栅格系统比官方文档中的示例代码简单不少。你不需要写 v-container ，更不需要写 v-app 和 v-main，只需要写 v-row 就够了：
<v-row>
<v-btn block color="primary">Hello</v-btn>
</v-row>
<v-row>
<v-btn block color="success">Hello</v-btn>
</v-row>
这段代码的效果如图所示：
从中可以看到，由于 Hello 按钮和 World 按钮分别在不同的两行，因此 Hello 和 World 按钮是等宽的。
2. 编写等宽列
如果想要把一行切分成多列，就要使用 <v-col>。需要注意的是，<v-col> 必须直接写在 <v-row> 下面，千万不能在 <v-col> 的外面再包裹一层容器：
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
</v-row>
跟上面那段代码相比，我们把 Hello 按钮也放进了 <v-col> 里，否则元素的间距会不一致。这段代码的效果如图所示：
通过编写三个 <v-col>，我们把 World 按钮这行切分成了三列，而且每一列的宽度都一样。这就是 Vuetify 栅格系统的特性之一：不需要任何配置，就能自动把一行切分成若干个等宽的部分。
3. 设置每一列的宽度比
在前文中，我们引入了一个「简单的首页布局」，在那个布局里，「侧边栏」和「主要内容」的宽度并不一样。要实现这样的布局，我们就要设置 <v-col> 的 cols 属性：
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="8">
<v-btn block color="success">World 1</v-btn>
</v-col>
<v-col cols="4">
<v-btn block color="success">World 2</v-btn>
</v-col>
</v-row>
代码效果如图所示：
Vuetify 的栅格系统将一行分割为 12 格，在 的 cols 属性中可以传入一个 1 到 12 的数字，表示**「这一列所占用的格子数」。也就是说，通过 cols 属性，我们就能指定每一列宽度的比例**。在上图中，World 1 所在的列格子数为 8，其宽度也正是 World 2 列的两倍。
4. 响应式布局
以上图的 Hello World 按钮为例，在电脑这样的大屏设备上，我们想让 World 1 比 World 2 宽一点，但是在手机上则希望按钮排成三行，每一行的按钮等宽。也就是说，我们需要给不同的设备编写不同的布局。Vuetify 的「断点」功能就是用来完成这个任务的。
官方文档「响应式断点」的说明如下：
我们要给不同的断点编写不同的布局。在这个例子中，我们要分别给「手机（xs）」和「平板（sm）」以上的设备编写两套布局，要做到这点，只需要把断点的名字传进 <v-col> 中即可：
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="8">
<v-btn block color="success">World 1</v-btn>
</v-col>
<v-col cols="12" sm="4">
<v-btn block color="success">World 2</v-btn>
</v-col>
</v-row>
cols="12" 表示这一列所占的格子数默认为 12。sm="8" 表示，在 sm 以上的设备中，这一列的宽度则为 8。我们可以总结出规律，假设我们传入的参数为 断点名字="属性值"，那么我们实际上修改的是大于等于「断点名字」的所有设备的设置。
代码在手机上的表现如下所示：
在宽屏的设备上则如下所示：
如果想要给多种设备编写不同的布局，只要多编写几个断点名字就可以了。
写这篇文章仅仅是因为我没有仔细阅读官方文档，误认为 Grid 的使用方式很复杂，浪费了不少时间。剩下来的许多特性，都可以通过查阅官方文档（网格系统）来了解，本文不再赘述。另外，Vuetify 真的是对开发者十分友好的前端库，在响应式布局、组件齐全度等方面比许多国产 UI 框架好得多。今年马上就要发布基于 Vue 3 的版本，欢迎大家来试着用用看！