栅格系统

Vuetify 附带了一个使用 flex-box 构建的 12 点栅格系统。 网格用于在应用程序的内容中创建特定布局。其中包含 5 种媒体断点，分别用于定位特定屏幕大小或方向：xs, sm, md, lg 和 xl。 这些分辨率在下面的视口断点表中定义，可以通过自定义 Breakpoint service 进行修改。

1.x 版本的栅格系统已经被弃用，2.x 的栅格系统更好。1.x 网格的文档在 v1.5 docs

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px
Largelgdesktop1264px > < 1904px
Extra largexl4k and ultra-wides> 1904px
* -16px on Desktop

用例

Vuetify 栅格受到 Bootstrap grid 的启发。它通过使用一系列容器，行和列来布局和对齐内容进行集成。 如果您不熟悉Flexbox，参阅链接内容的背景，术语，代码，指南来了解更多 Read the CSS Tricks flexbox guide。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <v-col
  5.         v-for="n in 3"
  6.         :key="n"
  7.         cols="12"
  8.         sm="4"
  9.       >
  10.         <v-card
  11.           class="pa-2"
  12.           outlined
  13.           tile
  14.         >
  15.           One of three columns
  16.         </v-card>
  17.       </v-col>
  18.     </v-row>
  19.   </v-container>
  20. </template>

Grids（栅格） - 图1

在上面的示例中，我们在小型，中型，大型和超大型设备上创建了三个等宽列。父级的 v-container 来居中子级的 v-col。

  • v-container 提供了居中和水平填充网站内容的功能。您也可以使用 fluid 属性在所有视口和设备尺寸上完全扩展容器。 遵循以前的 1.x 功能，在这些功能中，属性作为 v-container 中的类传递，从而允许轻松地使用助手类（例如 ma-#/pa-#/fill-height） 进行应用
  • v-row 是 v-col 的包装组件。它利用 flex 属性来控制内部列的布局和流。它使用的标准边距是 24px。这可以减少 dense 属性或完全移除 no-gutters 。这是 2.x 版本的用法，替换了 1.x 中的 v-layout。
  • v-col 是内容所有者，必须是 v-row 的直接子集。 这是 2.x 版本的用法，替换了 1.x 中的 v-flex。

确保您了解其局限性和 bugs around flexbox。例如无法 utilize certain HTML elements as flex containers。

将网格系统与IE11一起使用时，您需要设置一个明确的 height，因为 min-height 将不足以导致不正确的结果。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Grids（栅格） - 图2

实战场

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-row>
  4.       <v-col cols="12">
  5.         <v-row
  6.           :align="alignment"
  7.           :justify="justify"
  8.           class="grey lighten-5"
  9.           style="height: 300px;"
  10.         >
  11.           <v-card
  12.             v-for="n in 3"
  13.             :key="n"
  14.             class="ma-3 pa-6"
  15.             outlined
  16.             tile
  17.           >
  18.             Column
  19.           </v-card>
  20.         </v-row>
  21.       </v-col>
  22.       <v-col cols="12">
  23.         <v-row justify="center">
  24.           <v-col
  25.             cols="6"
  26.             md="2"
  27.           >
  28.             <v-select
  29.               v-model="alignment"
  30.               :items="alignmentsAvailable"
  31.               label="Align"
  32.             ></v-select>
  33.           </v-col>
  35.           <v-col
  36.             cols="6"
  37.             md="2"
  38.           >
  39.             <v-select
  40.               v-model="justify"
  41.               :items="justifyAvailable"
  42.               label="Justify"
  43.             ></v-select>
  44.           </v-col>
  45.         </v-row>
  46.       </v-col>
  47.     </v-row>
  48.   </v-container>
  49. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         alignmentsAvailable: [
  6.           'start',
  7.           'center',
  8.           'end',
  9.           'baseline',
  10.           'stretch',
  11.         ],
  12.         alignment: 'center',
  13.         dense: false,
  14.         justifyAvailable: [
  15.           'start',
  16.           'center',
  17.           'end',
  18.           'space-around',
  19.           'space-between',
  20.         ],
  21.         justify: 'center',
  22.       }
  23.     },
  24.   }
  25. </script>

Grids（栅格） - 图3

示例

下面是一些简单到复杂的例子。

自动大小的列

列将自动在其父容器内占据相等的空间。 可以使用 cols 属性修改。 您还可以使用 sm, md, lg, 和 xl 属性来进一步定义如何在不同视口尺寸下调整列的尺寸。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       v-for="n in 2"
  5.       :key="n"
  6.       :class="n === 1 ? 'mb-6' : ''"
  7.       no-gutters
  8.     >
  9.       <v-col
  10.         v-for="k in n + 1"
  11.         :key="k"
  12.       >
  13.         <v-card
  14.           class="pa-2"
  15.           outlined
  16.           tile
  17.         >
  18.           {{ k }} of {{ n + 1 }}
  19.         </v-card>
  20.       </v-col>
  21.     </v-row>
  22.   </v-container>
  23. </template>

Grids（栅格） - 图4

同等宽度的列

您可以将等宽的列分成多行。 虽然有一些针对较旧版本浏览器的解决方法，有一个 Safari flexbox bug。如果你是最新的浏览器，这应该没有必要。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <template v-for="n in 4">
  5.         <v-col :key="n">
  6.           <v-card
  7.             class="pa-2"
  8.             outlined
  9.             tile
  10.           >
  11.             Column
  12.           </v-card>
  13.         </v-col>
  14.         <v-responsive
  15.           v-if="n === 2"
  16.           :key="`width-${n}`"
  17.           width="100%"
  18.         ></v-responsive>
  19.       </template>
  20.     </v-row>
  21.   </v-container>
  22. </template>

Grids（栅格） - 图5

一列宽度

使用自动布局时，您只能定义一列的宽度，并且仍然具有其同级元素来自动调整其大小。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       no-gutters
  6.     >
  7.       <v-col
  8.         v-for="n in 3"
  9.         :key="n"
  10.         :cols="n === 2 ? 6 : undefined"
  11.       >
  12.         <v-card
  13.           class="pa-2"
  14.           outlined
  15.           tile
  16.         >
  17.           {{ n }} of 3 {{ n === 2 ? '(wider)' : '' }}
  18.         </v-card>
  19.       </v-col>
  20.     </v-row>
  21.     <v-row no-gutters>
  22.       <v-col
  23.         v-for="n in 3"
  24.         :key="n"
  25.         :cols="n === 2 ? 5 : undefined"
  26.       >
  27.         <v-card
  28.           class="pa-2"
  29.           outlined
  30.           tile
  31.         >
  32.           {{ n }} of 3 {{ n === 2 ? '(wider)' : '' }}
  33.         </v-card>
  34.       </v-col>
  35.     </v-row>
  36.   </v-container>
  37. </template>

Grids（栅格） - 图6

内容宽度可变

可以为列分配断点宽度，以根据其内容的自然宽度来调整大小。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       justify="center"
  6.       no-gutters
  7.     >
  8.       <v-col lg="2">
  9.         <v-card
  10.           class="pa-2"
  11.           outlined
  12.           tile
  13.         >
  14.           1 of 3
  15.         </v-card>
  16.       </v-col>
  17.       <v-col md="auto">
  18.         <v-card
  19.           class="pa-2"
  20.           outlined
  21.           tile
  22.         >
  23.           Variable width content
  24.         </v-card>
  25.       </v-col>
  26.       <v-col lg="2">
  27.         <v-card
  28.           class="pa-2"
  29.           outlined
  30.           tile
  31.         >
  32.           3 of 3
  33.         </v-card>
  34.       </v-col>
  35.     </v-row>
  36.     <v-row no-gutters>
  37.       <v-col>
  38.         <v-card
  39.           class="pa-2"
  40.           outlined
  41.           tile
  42.         >
  43.           1 of 3
  44.         </v-card>
  45.       </v-col>
  46.       <v-col md="auto">
  47.         <v-card
  48.           class="pa-2"
  49.           outlined
  50.           tile
  51.         >
  52.           Variable width content
  53.         </v-card>
  54.       </v-col>
  55.       <v-col lg="2">
  56.         <v-card
  57.           class="pa-2"
  58.           outlined
  59.           tile
  60.         >
  61.           3 of 3
  62.         </v-card>
  63.       </v-col>
  64.     </v-row>
  65.   </v-container>
  66. </template>

Grids（栅格） - 图7

扩张和收缩

默认情况下，flex 组件将自动填充行或列中的可用空间。 当未指定特定大小时，它们还将相对于 flex 容器中的其余 flex 项目收缩。 您可以使用 cols 属性并提供 1 到 12 的值来定义 v-col 的列宽。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       no-gutters
  6.     >
  7.       <v-col
  8.         v-for="n in 4"
  9.         :key="n"
  10.       >
  11.         <v-card
  12.           class="pa-2"
  13.           tile
  14.           outlined
  15.         >
  16.           col
  17.         </v-card>
  18.       </v-col>
  19.     </v-row>
  21.     <v-row no-gutters>
  22.       <v-col
  23.         v-for="n in 2"
  24.         :key="n"
  25.         :cols="n === 1 ? 8 : 4"
  26.       >
  27.         <v-card
  28.           class="pa-2"
  29.           tile
  30.           outlined
  31.         >
  32.           col-{{ n === 1 ? 8 : 4 }}
  33.         </v-card>
  34.       </v-col>
  35.     </v-row>
  36.   </v-container>
  37. </template>

Grids（栅格） - 图8

行和列断点

根据分辨率动态调整布局。（调整屏幕大小，并在 sm, md, 和 lg 断点上观察顶部的 row 布局更改）

template script

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       no-gutters
  6.     >
  7.       <v-col
  8.         v-for="n in 2"
  9.         :key="n"
  10.         :lg="cols[n - 1]"
  11.         :md="6"
  12.         :sm="cols[n - 1]"
  13.       >
  14.         <v-card
  15.           class="pa-2"
  16.           outlined
  17.           tile
  18.         >
  19.           col-{{ cols[n - 1] }}
  20.         </v-card>
  21.       </v-col>
  22.     </v-row>
  23.     <v-row no-gutters>
  24.       <v-col
  25.         v-for="n in 3"
  26.         :key="n"
  27.         cols="sm"
  28.       >
  29.         <v-card
  30.           class="pa-2"
  31.           outlined
  32.           tile
  33.         >
  34.           col
  35.         </v-card>
  36.       </v-col>
  37.     </v-row>
  38.   </v-container>
  39. </template>
  1. <script>
  2.   export default {
  3.     computed: {
  4.       cols () {
  5.         const { lg, sm } = this.$vuetify.breakpoint
  6.         return lg ? [3, 9] : sm ? [9, 3] : [6, 6]
  7.       },
  8.     },
  9.   }
  10. </script>

Grids（栅格） - 图9

独特的布局

Vuetify 栅格系统的强大和灵活性使您可以创建出色的用户界面。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  4.     <v-row>
  5.       <v-col
  6.         cols="12"
  7.         md="8"
  8.       >
  9.         <v-card
  10.           class="pa-2"
  11.           outlined
  12.           tile
  13.         >
  14.           .col-12 .col-md-8
  15.         </v-card>
  16.       </v-col>
  17.       <v-col
  18.         cols="6"
  19.         md="4"
  20.       >
  21.         <v-card
  22.           class="pa-2"
  23.           outlined
  24.           tile
  25.         >
  26.           .col-6 .col-md-4
  27.         </v-card>
  28.       </v-col>
  29.     </v-row>
  31.     <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  32.     <v-row>
  33.       <v-col
  34.         v-for="n in 3"
  35.         :key="n"
  36.         cols="6"
  37.         md="4"
  38.       >
  39.         <v-card
  40.           class="pa-2"
  41.           outlined
  42.           tile
  43.         >
  44.           .col-6 .col-md-4
  45.         </v-card>
  46.       </v-col>
  47.     </v-row>
  49.     <!-- Columns are always 50% wide, on mobile and desktop -->
  50.     <v-row>
  51.       <v-col
  52.         v-for="n in 2"
  53.         :key="n"
  54.         cols="6"
  55.       >
  56.         <v-card
  57.           class="pa-2"
  58.           outlined
  59.           tile
  60.         >
  61.           .col-6
  62.         </v-card>
  63.       </v-col>
  64.     </v-row>
  65.   </v-container>
  66. </template>

Grids（栅格） - 图10

垂直对齐

使用 align 和 align-self 属性更改队列及其上级的垂直对齐。

template script

  1. <template>
  2.   <div>
  3.     <v-container
  4.       v-for="align in alignments"
  5.       :key="align"
  6.       class="grey lighten-5 mb-6"
  7.     >
  8.       <v-row
  9.         :align="align"
  10.         no-gutters
  11.         style="height: 150px;"
  12.       >
  13.         <v-col
  14.           v-for="n in 3"
  15.           :key="n"
  16.         >
  17.           <v-card
  18.             class="pa-2"
  19.             outlined
  20.             tile
  21.           >
  22.             One of three columns
  23.           </v-card>
  24.         </v-col>
  25.       </v-row>
  26.     </v-container>
  28.     <v-container class="grey lighten-5">
  29.       <v-row
  30.         no-gutters
  31.         style="height: 150px;"
  32.       >
  33.         <v-col
  34.           v-for="align in alignments"
  35.           :key="align"
  36.           :align-self="align"
  37.         >
  38.           <v-card
  39.             class="pa-2"
  40.             outlined
  41.             tile
  42.           >
  43.             One of three columns
  44.           </v-card>
  45.         </v-col>
  46.       </v-row>
  47.     </v-container>
  48.   </div>
  49. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       alignments: [
  5.         'start',
  6.         'center',
  7.         'end',
  8.       ],
  9.     }),
  10.   }
  11. </script>

Grids（栅格） - 图11

水平对齐

使用 justify 和 justify-self 属性更改伸缩项及其父项的水平对齐。

template script

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       v-for="j in justify"
  5.       :key="j"
  6.       :justify="j"
  7.     >
  8.       <v-col
  9.         v-for="k in 2"
  10.         :key="k"
  11.         md="4"
  12.       >
  13.         <v-card
  14.           class="pa-2"
  15.           outlined
  16.           tile
  17.         >
  18.           One of two columns
  19.         </v-card>
  20.       </v-col>
  21.     </v-row>
  22.   </v-container>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       justify: [
  5.         'start',
  6.         'center',
  7.         'end',
  8.         'space-around',
  9.         'space-between',
  10.       ],
  11.     }),
  12.   }
  13. </script>

Grids（栅格） - 图12

Vue School

Learn Vue.js and modern and cutting-edge front-end technologies with our premium tutorials and video courses.

ads by Vuetify

](https://vueschool.io/?ref=vuetifyjs.com&friend=vuetify)

没有边距槽

您可以使用 no-gutters 属性去掉 v-row 的负边距让其直接的 v-col 子代的填充。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <v-col
  5.         cols="12"
  6.         sm="6"
  7.         md="8"
  8.       >
  9.         <v-card
  10.           class="pa-2"
  11.           outlined
  12.           tile
  13.         >
  14.           .col-12 .col-sm-6 .col-md-8
  15.         </v-card>
  16.       </v-col>
  17.       <v-col
  18.         cols="6"
  19.         md="4"
  20.       >
  21.         <v-card
  22.           class="pa-2"
  23.           outlined
  24.           tile
  25.         >
  26.           .col-6 .col-md-4
  27.         </v-card>
  28.       </v-col>
  29.     </v-row>
  30.   </v-container>
  31. </template>

Grids（栅格） - 图13

列包装

当给定行中放置超过 12 列时（不使用 .flex-nowrap 工具类），每组额外的列将换行。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <v-col cols="9">
  5.         <v-card
  6.           class="pa-2"
  7.           outlined
  8.           tile
  9.         >
  10.           .col-9
  11.         </v-card>
  12.       </v-col>
  13.       <v-col cols="4">
  14.         <v-card
  15.           class="pa-2"
  16.           outlined
  17.           tile
  18.         >
  19.           .col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
  20.         </v-card>
  21.       </v-col>
  22.       <v-col cols="6">
  23.         <v-card
  24.           class="pa-2"
  25.           outlined
  26.           tile
  27.         >
  28.           .col-6<br>Subsequent columns continue along the new line.
  29.         </v-card>
  30.       </v-col>
  31.     </v-row>
  32.   </v-container>
  33. </template>

Grids（栅格） - 图14

顺序类

您可以控制栅格子项目的排序。与偏移一样，您可以为不同的尺寸设置不同的排序，设计适合任何应用程序的专门的屏幕布局。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <v-col>
  5.         <v-card
  6.           class="pa-2"
  7.           outlined
  8.           tile
  9.         >
  10.           First, but unordered
  11.         </v-card>
  12.       </v-col>
  13.       <v-col order="12">
  14.         <v-card
  15.           class="pa-2"
  16.           outlined
  17.           tile
  18.         >
  19.           Second, but last
  20.         </v-card>
  21.       </v-col>
  22.       <v-col order="1">
  23.         <v-card
  24.           class="pa-2"
  25.           outlined
  26.           tile
  27.         >
  28.           Third, but first
  29.         </v-card>
  30.       </v-col>
  31.     </v-row>
  32.   </v-container>
  33. </template>

Grids（栅格） - 图15

顺序 最后/最前

您还可以显式指定 first 或 last，这将分别为 order CSS 属性分配 -1 或 13 值。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row no-gutters>
  4.       <v-col order="last">
  5.         <v-card
  6.           class="pa-2"
  7.           outlined
  8.           tile
  9.         >
  10.           First, but last
  11.         </v-card>
  12.       </v-col>
  13.       <v-col>
  14.         <v-card
  15.           class="pa-2"
  16.           outlined
  17.           tile
  18.         >
  19.           Second, but unordered
  20.         </v-card>
  21.       </v-col>
  22.       <v-col order="first">
  23.         <v-card
  24.           class="pa-2"
  25.           outlined
  26.           tile
  27.         >
  28.           Third, but first
  29.         </v-card>
  30.       </v-col>
  31.     </v-row>
  32.   </v-container>
  33. </template>

Grids（栅格） - 图16

偏移

偏移对于补偿可能还不可见的元素或控制内容的位置很有用。就像断点一样，您可以为仍和可用的大小设置偏移量，这使您可以根据需要精确调整应用程序布局。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       no-gutters
  6.     >
  7.       <v-col md="4">
  8.         <v-card
  9.           class="pa-2"
  10.           outlined
  11.           tile
  12.         >
  13.           .col-md-4
  14.         </v-card>
  15.       </v-col>
  16.       <v-col
  17.         md="4"
  18.         offset-md="4"
  19.       >
  20.         <v-card
  21.           class="pa-2"
  22.           outlined
  23.           tile
  24.         >
  25.           .col-md-4 .offset-md-4
  26.         </v-card>
  27.       </v-col>
  28.     </v-row>
  29.     <v-row
  30.       class="mb-6"
  31.       no-gutters
  32.     >
  33.       <v-col
  34.         md="3"
  35.         offset-md="3"
  36.       >
  37.         <v-card
  38.           class="pa-2"
  39.           outlined
  40.           tile
  41.         >
  42.           .col-md-3 .offset-md-3
  43.         </v-card>
  44.       </v-col>
  45.       <v-col
  46.         md="3"
  47.         offset-md="3"
  48.       >
  49.         <v-card
  50.           class="pa-2"
  51.           outlined
  52.           tile
  53.         >
  54.           .col-md-3 .offset-md-3
  55.         </v-card>
  56.       </v-col>
  57.     </v-row>
  58.     <v-row no-gutters>
  59.       <v-col
  60.         md="6"
  61.         offset-md="3"
  62.       >
  63.         <v-card
  64.           class="pa-2"
  65.           outlined
  66.           tile
  67.         >
  68.           .col-md-6 .offset-md-3
  69.         </v-card>
  70.       </v-col>
  71.     </v-row>
  72.   </v-container>
  73. </template>

Grids（栅格） - 图17

偏移断点

每个断点也可偏移。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row
  4.       class="mb-6"
  5.       no-gutters
  6.     >
  7.       <v-col
  8.         sm="5"
  9.         md="6"
  10.       >
  11.         <v-card
  12.           class="pa-2"
  13.           outlined
  14.           tile
  15.         >
  16.           .col-sm-5 .col-md-6
  17.         </v-card>
  18.       </v-col>
  19.       <v-col
  20.         sm="5"
  21.         offset-sm="2"
  22.         md="6"
  23.         offset-md="0"
  24.       >
  25.         <v-card
  26.           class="pa-2"
  27.           outlined
  28.           tile
  29.         >
  30.           .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
  31.         </v-card>
  32.       </v-col>
  33.     </v-row>
  34.     <v-row no-gutters>
  35.       <v-col
  36.         sm="6"
  37.         md="5"
  38.         lg="6"
  39.       >
  40.         <v-card
  41.           class="pa-2"
  42.           outlined
  43.           tile
  44.         >
  45.           .col-sm-6 .col-md-5 .col-lg-6
  46.         </v-card>
  47.       </v-col>
  48.       <v-col
  49.         sm="6"
  50.         md="5"
  51.         offset-md="2"
  52.         lg="6"
  53.         offset-lg="0"
  54.       >
  55.         <v-card
  56.           class="pa-2"
  57.           outlined
  58.           tile
  59.         >
  60.           .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
  61.         </v-card>
  62.       </v-col>
  63.     </v-row>
  64.   </v-container>
  65. </template>

Grids（栅格） - 图18

边距工具

使用 auto margin helper utilities 你可以强行将列从彼此分离。

template

  1. <template>
  2.   <div class="ma-5 pa-5">
  3.     <v-container class="grey lighten-5">
  4.       <v-row>
  5.         <v-col md="4">
  6.           <v-card
  7.             class="pa-2"
  8.             outlined
  9.             tile
  10.           >
  11.             .col-md-4
  12.           </v-card>
  13.         </v-col>
  14.         <v-col
  15.           md="4"
  16.           class="ml-auto"
  17.         >
  18.           <v-card
  19.             class="pa-2"
  20.             outlined
  21.             tile
  22.           >
  23.             .col-md-4 .ml-auto
  24.           </v-card>
  25.         </v-col>
  26.       </v-row>
  27.       <v-row>
  28.         <v-col
  29.           md="3"
  30.           class="ml-md-auto"
  31.         >
  32.           <v-card
  33.             class="pa-2"
  34.             outlined
  35.             tile
  36.           >
  37.             .col-md-3 .ml-md-auto
  38.           </v-card>
  39.         </v-col>
  40.         <v-col
  41.           md="3"
  42.           class="ml-md-auto"
  43.         >
  44.           <v-card
  45.             class="pa-2"
  46.             outlined
  47.             tile
  48.           >
  49.             .col-md-3 .ml-md-auto
  50.           </v-card>
  51.         </v-col>
  52.       </v-row>
  53.       <v-row>
  54.         <v-col
  55.           cols="auto"
  56.           class="mr-auto"
  57.         >
  58.           <v-card
  59.             class="pa-2"
  60.             outlined
  61.             tile
  62.           >
  63.             .col-auto .mr-auto
  64.           </v-card>
  65.         </v-col>
  66.         <v-col cols="auto">
  67.           <v-card
  68.             class="pa-2"
  69.             outlined
  70.             tile
  71.           >
  72.             .col-auto
  73.           </v-card>
  74.         </v-col>
  75.       </v-row>
  76.     </v-container>
  77.   </div>
  78. </template>

Grids（栅格） - 图19

嵌套栅格

栅格可以被嵌套，类似于其它框架，以实现非常自定义的布局。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row>
  4.       <v-col sm="9">
  5.         <v-card
  6.           class="pa-2"
  7.           outlined
  8.           tile
  9.         >
  10.           Level 1: .col-sm-9
  11.         </v-card>
  12.         <v-row no-gutters>
  13.           <v-col
  14.             cols="8"
  15.             sm="6"
  16.           >
  17.             <v-card
  18.               class="pa-2"
  19.               outlined
  20.               style="background-color: lightgrey;"
  21.               tile
  22.             >
  23.               Level 2: .col-8 .col-sm-6
  24.             </v-card>
  25.           </v-col>
  26.           <v-col
  27.             cols="4"
  28.             sm="6"
  29.           >
  30.             <v-card
  31.               class="pa-2"
  32.               outlined
  33.               style="background-color: lightgrey;"
  34.               tile
  35.             >
  36.               Level 3: .col-4 .col-sm-6
  37.             </v-card>
  38.           </v-col>
  39.         </v-row>
  40.       </v-col>
  41.     </v-row>
  42.   </v-container>
  43. </template>

Grids（栅格） - 图20

空格

当您想要填充可用空间或在两个组件之间留出空间时，v-spacer 组件会很有用。

template

  1. <template>
  2.   <v-container class="grey lighten-5">
  3.     <v-row>
  4.       <v-col>
  5.         <v-card
  6.           class="pa-2"
  7.           outlined
  8.           tile
  9.         >
  10.           .col
  11.         </v-card>
  12.       </v-col>
  14.       <v-spacer></v-spacer>
  16.       <v-col>
  17.         <v-card
  18.           class="pa-2"
  19.           outlined
  20.           tile
  21.         >
  22.           .col
  23.         </v-card>
  24.       </v-col>
  25.     </v-row>
  27.     <v-row>
  28.       <v-col
  29.         cols="auto"
  30.         lg="3"
  31.       >
  32.         <v-card
  33.           class="pa-2"
  34.           outlined
  35.           tile
  36.         >
  37.           .col-auto
  38.         </v-card>
  39.       </v-col>
  41.       <v-spacer></v-spacer>
  43.       <v-col>
  44.         <v-card
  45.           class="pa-2"
  46.           outlined
  47.           tile
  48.         >
  49.           .col
  50.         </v-card>
  51.       </v-col>
  53.       <v-spacer></v-spacer>
  55.       <v-col md="5">
  56.         <v-card
  57.           class="pa-2"
  58.           cols="auto"
  59.           outlined
  60.           tile
  61.         >
  62.           .col-md-5
  63.         </v-card>
  64.       </v-col>
  65.     </v-row>
  66.   </v-container>
  67. </template>

Grids（栅格） - 图21