Vuetify 附带了一个使用 flex-box 构建的 12 点栅格系统。 网格用于在应用程序的内容中创建特定布局。其中包含 5 种媒体断点，分别用于定位特定屏幕大小或方向：xs, sm, md, lg 和 xl。 这些分辨率在下面的视口断点表中定义，可以通过自定义 Breakpoint service 进行修改。
1.x 版本的栅格系统已经被弃用，2.x 的栅格系统更好。1.x 网格的文档在 v1.5 docs
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k and ultra-wides | > 1904px* |
| * -16px on Desktop | |||
Vuetify 栅格受到 Bootstrap grid 的启发。它通过使用一系列容器，行和列来布局和对齐内容进行集成。 如果您不熟悉Flexbox，参阅链接内容的背景，术语，代码，指南来了解更多 Read the CSS Tricks flexbox guide。
在上面的示例中，我们在小型，中型，大型和超大型设备上创建了三个等宽列。父级的 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 将不足以导致不正确的结果。
下面是一些简单到复杂的例子。
列将自动在其父容器内占据相等的空间。 可以使用 cols 属性修改。 您还可以使用 sm, md, lg, 和 xl 属性来进一步定义如何在不同视口尺寸下调整列的尺寸。
您可以将等宽的列分成多行。 虽然有一些针对较旧版本浏览器的解决方法，有一个 Safari flexbox bug。如果你是最新的浏览器，这应该没有必要。
使用自动布局时，您只能定义一列的宽度，并且仍然具有其同级元素来自动调整其大小。
可以为列分配断点宽度，以根据其内容的自然宽度来调整大小。
默认情况下，flex 组件将自动填充行或列中的可用空间。 当未指定特定大小时，它们还将相对于 flex 容器中的其余 flex 项目收缩。 您可以使用 cols 属性并提供 1 到 12 的值来定义 v-col 的列宽。
根据分辨率动态调整布局。（调整屏幕大小，并在 sm, md, 和 lg 断点上观察顶部的 row 布局更改）
Vuetify 栅格系统的强大和灵活性使您可以创建出色的用户界面。
使用 align 和 align-self 属性更改队列及其上级的垂直对齐。
使用 justify 和 justify-self 属性更改伸缩项及其父项的水平对齐。
您可以使用 no-gutters 属性去掉 v-row 的负边距让其直接的 v-col 子代的填充。
当给定行中放置超过 12 列时（不使用 .flex-nowrap 工具类），每组额外的列将换行。
您可以控制栅格子项目的排序。与偏移一样，您可以为不同的尺寸设置不同的排序，设计适合任何应用程序的专门的屏幕布局。
您还可以显式指定 first 或 last，这将分别为 order CSS 属性分配 -1 或 13 值。
偏移对于补偿可能还不可见的元素或控制内容的位置很有用。就像断点一样，您可以为仍和可用的大小设置偏移量，这使您可以根据需要精确调整应用程序布局。
每个断点也可偏移。
使用 auto margin helper utilities 你可以强行将列从彼此分离。
栅格可以被嵌套，类似于其它框架，以实现非常自定义的布局。
当您想要填充可用空间或在两个组件之间留出空间时，v-spacer 组件会很有用。