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

VuetifyのGridシステム

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

ViteでVueアプリを構築した場合

ViteでVueアプリを構築した場合、初期画面のmain.cssが意外にクセが強く、これを頭に入れておかないとVuetifyを導入した後に「？」となる。

初期のmain.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

main.css

#app {
  /* index.htmlから読み込まれるApp.vueの幅　*/
  max-width: 1280px;

#appにマウントされた部分（index.htmlのid="app"で読み込まれるApp.vue）
の大きさが1280pxで固定される。
↓ブラウザの幅を広げても四角の部分が1280pxで固定

@mediaのmix-width

main.css

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

min-widthが指定されているので、1024px以下になると横並びだったのが、上下に並ぶ
displau: flexで固定ではなくなり、place-item: centerで上下の中央に配置される。

@mediaのdisplayとgrid-template-columns

• display: grid;
  CSS Gridを使って要素を行（row）と列（column）で配置できる
• grid-template-columns: 1fr 1fr;
  fr（フラクション）は「余ったスペースを均等に分配」する単位
  この場合は等間隔で2列にしている

main.css

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

とりあえず邪魔になる設定を外したい

max-widthが必要無い場合はコメントアウトする
際限なく広がりたくない場合はそのまま

main.css

#app {
  /* max-width: 1280px; */
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal;
}

1024px以下で変な動きになる場合は
@mediaのmin-width: none
にする

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のあるレイアウトを適用させてみます。

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が予期せぬところに動きます。

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