网格系统
Vuetify 配备了一个使用 flexbox 构建的 12 格网格系统。
网格用于在应用程序内容中创建特定的布局。它包含 5 种媒体断点，用于针对特定的屏幕大小或方向进行定位：xs、sm、md、lg 和 xl。这些断点在视口断点表中定义如下，并可以通过自定义断点服务进行修改。
使用
Vuetify 网格受到 Bootstrap 网格 的很大启发。它通过使用一系列的容器、行和列来布局和对齐内容。如果您对 flexbox 不熟悉，可以阅读 CSS Tricks 的 flexbox 指南，了解其背景、术语、指南和代码片段。
| Device | Code | Type | Range |
|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px |
| Small | sm | Small to medium tablet | 600px > < 960px |
| Medium | md | Large tablet to laptop | 960px > < 1280px |
| Large | lg | Laptop to desktop | 1280px > < 1920px |
| Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px |
| Extra extra large | xxl | 4k and ultra-wide | > 2560px |
| Specification | |||
API
| 组件 | 描述 |
|---|---|
| v-container | 容器组件 |
| v-row | 用于创建行的子组件 |
| v-col | 用于创建列的子组件 |
| v-spacer | 在网格场景中经常使用的组件 |
子组件
v-container
v-container 提供了将站点内容居中和水平填充的能力。您还可以使用 fluid 属性来完全延伸容器，覆盖所有视口和设备尺寸。保留了之前 1.x 版本的功能，其中属性被传递为 v-container 上的类，允许应用助手类（例如 ma-#/pa-#/fill-height）轻松应用。
v-col
v-col 是一个内容容器，必须是 v-row 的直接子级。这是 1.x 中 v-flex 的 2.x 替代品。
v-row
v-row 是 v-col 的包装组件。它利用 flex 属性来控制其内部列的布局和流动。它使用标准的间距为 24px。这可以通过 dense 属性来减小，或者通过 no-gutters 完全移除。这是 1.x 中 v-layout 的 2.x 替代品。
v-spacer
v-spacer 是一个基本但多用途的间距组件，用于在父组件的子组件之间分配剩余宽度。当在子组件之前或之后放置单个 v-spacer 时，组件将推到其容器的右侧和左侧。当在多个组件之间使用多个 v-spacer 时，剩余宽度将均匀分布在每个间距之间。
辅助类
fill-height 类将 height: 100% 应用于元素。当应用于 v-container 时，它还会设置 align-items: center。
注意
INFO
网格组件上基于断点的属性按照“andUp”方式工作。考虑到这一点，xs 断点被假定并已从属性上下文中移除。这适用于 v-col 上的 offset、justify、align 和单个断点属性。
- 存在像 justify-sm 和 justify-md 这样的属性，但是 justify-xs 并不存在，它只是 justify。
v-col上不存在 xs 属性。其等价项是 cols 属性。
示例
属性
垂直对齐
使用 align 和 align-self 属性来改变 flex 项目及其父项的垂直对齐方式。
断点尺寸
列会自动在其父容器中占据相等的空间。这可以通过 cols 属性进行修改。您还可以利用 sm、md、lg 和 xl 属性来进一步定义在不同视口大小下列的大小。
J水平对齐
使用 justify 属性改变 flex 项目的水平对齐方式。
无间隔
你可以使用 no-gutters 属性从 v-row 中移除负值外边距，从其直接子 v-col 中移除内边距。
偏移
偏移量对于补偿可能尚不可见的元素或控制内容的位置非常有用。就像断点一样，您可以为任何可用的尺寸设置偏移量。这使您可以精确地根据自己的需求调整应用程序的布局。
偏移断点
偏移也可以在每个断点的基础上设置。
排序
您可以控制网格项的排序。与偏移量一样，您可以为不同的尺寸设置不同的顺序。设计专门的屏幕布局，以适应任何应用程序。
先后排序
你也可以明确指定 first 或 last，这将分别为 order CSS 属性分配 -1 或 13 值。
其他
换行列
当在给定的行中放置了超过 12 个列时（没有使用 .flex-nowrap），每一组额外的列都将被包入新的行。
在下面的示例中，第一个和第二个 v-col 组件总共占据了 13 列的宽度，这意味着第二个 v-col 会被换行到新行。
等宽列
您可以使用 v-responsive 将等宽的列分成多行。
增长与收缩
默认情况下，flex 组件会自动填充行或列中的可用空间。当未指定特定大小时，它们也会相对于 flex 容器中的其他 flex 项收缩。您可以通过使用 cols 属性并提供 1 到 12 的值来定义 v-col 的列宽。
外边距辅助
使用外边距工具类 可以强行把同级列分开。
嵌套网格
与其他框架类似，网格可以被嵌套，以实现非常自定义的布局。
一列宽度
使用自动布局时，你可以只定义一列的宽度，并且仍然可以让它的同级元素围绕它自动调整大小。
行和列断点
根据分辨率动态更改布局。调整屏幕大小，观察在 sm、md 和 lg 断点下行布局的变化。
空白
v-spacer 组件在你想要填充可用空间或在两个组件之间留出空间时非常有用。