Vite-VueアプリでVuetifyを導入した場合の初期画面Gridレイアウト

# VuetifyのGridシステム
https://vuetifyjs.com/ja/components/grids/

公式のGrid systemの説明にある通り、VuetifyのグリッドはBootstrapに影響を受けている。
なので12分割を基本としてレイアウトを組み立てるのが基本となる。

# ViteでVueアプリを構築した場合
ViteでVueアプリを構築した場合、初期画面のmain.cssが意外にクセが強く、これを頭に入れておかないとVuetifyを導入した後に「？」となる。
### 初期のmain.css
各パラメータに注釈を入れてあります。
```css:main.css
@import './base.css';

#app {
  /* index.htmlから読み込まれるApp.vueの幅　*/
  max-width: 1280px;
  margin: 0 auto;
  /* padding(内側の余白) */
  padding: 2rem;
  font-weight: normal;
}
...中略...
/* @mediaでレスポンシブな設定を行う */
/* ここでは画面幅が1024px以上の時、bodyの中の要素がflex(横並び)になる */
/* 縦並びと横並びのブレイクポイントを設定 */
@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
/* display: gridはCSS Gridを使って要素を行（row）と列（column）で配置できる */
  #app {
    display: grid;
    /* fr（フラクション）は「余ったスペースを均等に分配」する単位 */
    /* この場合は等間隔で2列にしている */
    grid-template-columns: 1fr 1fr;
    /* 横配置の時、上のpaddingを0にする */
    padding: 0 2rem;
  }
}
```
# このままだとどうなるか
### #appのmax-width

```css:main.css
#app {
  /* index.htmlから読み込まれるApp.vueの幅　*/
  max-width: 1280px;
```
#appにマウントされた部分（index.htmlのid="app"で読み込まれるApp.vue）
の大きさが1280pxで固定される。
↓ブラウザの幅を広げても四角の部分が1280pxで固定
![スクリーンショット 2025-02-09 14.56.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/19ce3e59-a8dc-bba2-3fc1-7350d159a442.png)

### @mediaのmix-width
```css:main.css
@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
```
min-widthが指定されているので、1024px以下になると横並びだったのが、上下に並ぶ
displau: flexで固定ではなくなり、place-item: centerで上下の中央に配置される。

![スクリーンショット 2025-02-09 14.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/36ff6bff-3586-11aa-c7e9-863bc9a19538.png)

### @mediaのdisplayとgrid-template-columns
+ display: grid;
 CSS Gridを使って要素を行（row）と列（column）で配置できる
+ grid-template-columns: 1fr 1fr;
 fr（フラクション）は「余ったスペースを均等に分配」する単位
 この場合は等間隔で2列にしている
```css:main.css
  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}
```

# とりあえず邪魔になる設定を外したい
max-widthが必要無い場合はコメントアウトする
際限なく広がりたくない場合はそのまま
```css:main.css
#app {
  /* max-width: 1280px; */
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}
```
1024px以下で変な動きになる場合は
@mediaのmin-width: none
にする
```css :main.css
/* @media (min-width: 1024px) { */
@media (min-width: none) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}
```
# 初期設定のままvuetifyのGridレイアウトを適用
app.vueにvuetifyのレイアウトグリッドからコピペして上にnav-bar、左にnavigation-drawer、右側にmainのあるレイアウトを適用させてみます。
```vue:app.vue
<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer>
      <v-list>
        <v-list-item title="Navigation drawer"></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar title="Application bar"></v-app-bar>

    <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
      Main Content
    </v-main>
  </v-layout>
</template>
```
初期設定のままだと、@media (min-width: 1024px) が効いているので、
ブラウザの幅が1024pxより小さくなるとMain Contentが予期せぬところに動きます。

![スクリーンショット 2025-02-09 15.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/adc05c18-8112-5ad0-0a4a-e5beaaf73100.png)

@media (min-width: none)にすることによって、
ブラウザの幅が1024pxより小さくなってもMain Contentが動かなくなります。