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

ipid君

25歳、学生です

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 格 ，在 <v-col> 的 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>