Vuetify 2.0 栅格系统（Grid）入门教程

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>