[Vuetify] Grid system

參考官網：https://vuetifyjs.com/en/components/grids/

看起來跟曾經學過的 Bootstrap 有點像，也是預設 12 個 columns 和以 flexbox 技術為基礎。

也有 RWD 斷點設計：

Vuetify

Bootstrap

在 Vuetify 的官網確實看到一段話：

The Vuetify grid is heavily inspired by the Bootstrap grid.
Vuetify 網格深受 Bootstrap 網格的啟發。

太好了～

所以會 Bootstrap 應該會好上手！

基本使用方式

1. 一樣要有 container 代表要用到 grid 系統，在 vuetify 是使用 <v-container></v-container> 。
2. v-row 是 v-col 的包裝組件，要把 <v-row></v-row> 放在 <v-container></v-container> 下一層。
3. 接下來就可以在 v-row 內使用 <v-col></v-col> 做排版。

說明：
v-row 就是代表一列，v-col 是裡面的欄位，可用 v-col 設計要多寬。

怎麼置中？

查到這篇：https://stackoverflow.com/questions/52343526/center-content-vertically-on-vuetify

Vuetify 版本在 v.2.x.x 的就可以在 v-row 加兩個屬性，讓裡面的元素置中：

<v-row
    align="center"
    justify="center"
></v-row>

就像 flexbox 的 align-items: center; 和 justify-content: center; 👍🏻

RWD 使用範例：

<v-col cols="12" sm="3"></v-col>

跟 Bootstrap 一樣是手機優先，所以預設的 cols 是給最小螢幕寬度的設定，而 sm 是給螢幕寬度大於 sm 設定的 600px 以上的裝置。