Vuetifyによる3カラムレイアウトの書き方 - 疑念は探究の動機であり、探究の唯一の目的は信念の確定である。

概要
Vuetifyによる3カラムレイアウトのコードを記述する。

3カラムレイアウトのイメージ図

実際の完成ページ
1. 画面が大きい(lg)かつサイドバーを開いた場合

2. 画面が大きい(lg)かつサイドバーを閉じた場合

3. 画面が小さい(sm)場合

今回はNuxtで実装した。
次のコードはPageフォルダ内のファイルである。Layoutsはデフォルト。

<template>
  <div class="mt-n3">
    <v-row no-gutters>
      <!-- Left Side -->
      <v-col
        cols="12"
        sm="2"
        lg="2"
      >
      <div class="pt-16">
      <!-- Left Side 1 -->
      <v-card-title class="font-weight-bold text-subtitle-1">
        Left Side 1
      </v-card-title>
      <!-- Left Side 2 -->
      <v-card-title class="font-weight-bold text-subtitle-1">
        Left Side 2
      </v-card-title>
      <!-- Left Side 3 -->
      <v-card-title class="font-weight-bold text-subtitle-1">
        Left Side 3
      </v-card-title>
      </div>
      </v-col>

      <!-- Center Side -->
      <v-col
        cols="12"
        sm="8"
        lg="8"
        
      >
      <v-card
        class="pt-6 pl-2 pr-2"
        outlined
        tile
      >
      <v-row class="mb-6" align-content="center">
        <v-col>
          <h1 class="text-center">Center Side</h1>
        </v-col>
      </v-row>
      <v-row no-gutters class="mb-10">
        <v-col cols="3">
          Partition 1
        </v-col>
        <v-col cols="3">
          Partition 2
        </v-col>
        <v-col cols="3">
          Partition 3
        </v-col>
        <v-col cols="3">
          Partition 4
        </v-col>
      </v-row>
      <v-row no-gutters class="mb-10">
        <v-col cols="4">
          Center Side 1
        </v-col>
        <v-col cols="4">
          Center Side 2
        </v-col>
        <v-col cols="4">
          Center Side 3
        </v-col>
      </v-row>
      <v-row class="mb-6" align-content="center">
          <v-col cols="6">
            Partition Center 1
            <v-text-field
              outlined
              tile
            ></v-text-field>
          </v-col>
          <v-col cols="6">
            Partition Center 2
            <v-text-field
              outlined
              tile
            ></v-text-field>
          </v-col>
      </v-row>      
      <v-row class="mb-6" align-content="center">
          <v-col cols="12">
            Partition
            <v-text-field
              outlined
              tile
            ></v-text-field>
          </v-col>
      </v-row>      
      </v-card>
      </v-col>

      <!-- Right Side -->
      <v-col
        cols="12"
        sm="2"
        lg="2"
      >
      <div class="pt-16 pl-2 pr-2">
      <v-card-title class=" text-subtitle-1" style="border-bottom: solid 1px; padding-bottom: 1px;">
        HAGE
      </v-card-title>
      <v-card-title class="mb-7 text-subtitle-1" style="border-bottom: solid 1px; padding-bottom: 1px;">
        BOKE
      </v-card-title>
      </div>
      </v-col>
    </v-row>
  </div>
</template>

問題点

上記のコードを次のように修正して、バックグラウンドの色を変更してみます。

before:
<v-row no-gutters>

after:
<v-row no-gutters class="grey lighten-4 black--text">

before:
      <!-- Center Side -->
      <v-col
        cols="12"
        sm="8"
        lg="8"
        
      >
      <v-card
        class="pt-6 pl-2 pr-2"
        outlined
        tile
      >

after:
      <!-- Center Side -->
      <v-col
        cols="12"
        sm="8"
        lg="8"
        
      >
      <v-card
        class="pt-6 pl-2 pr-2 blue"
        outlined
        tile
      >

すると次のようになります。

1. 画面が大きい(lg)かつサイドバーを開いた場合

2. 画面が大きい(lg)かつサイドバーを閉じた場合

3. 画面が小さい(sm)場合

この3カラムレイアウトのコードには次のような問題点があります。

サイドの2つのカラムは同じ色になってしまう。
中央のv-cardが中途半端になってしまう。ヘッダまでピッタリとカードをつけたいが、それを自動的に調節してくっつける方法がわからない。
サイドバーが開いていない場合、サイドの2つのカラムは両端まで広がっていない。

解決方法

上記の問題点は一部、修正することができます。以下、アドホック的な解決策です。

サイドの2つのカラムは同じ色になってしまう。

次のようにバックグラウンドを修正すれば、サイドのカラムの色も自由に変更することができます。

before:
<template>
  <div class="mt-n3">
    <v-row no-gutters>
      <!-- Left Side -->
(中略)
      <!-- Right Side -->
      <v-col
        cols="12"
        sm="2"
        lg="2"
      >


after:
<template>
  <div class="mt-n3">
    <v-row no-gutters class="grey lighten-4 black--text">
      <!-- Left Side -->
(中略)
      <!-- Right Side -->
      <v-col
        cols="12"
        sm="2"
        lg="2"
        class="yellow"
      >

修正結果

中央の`v-card`が中途半端になってしまう。

v-cardのプロパティにheightやmax-heightなどがありますので、それを利用すればカードの境界線とヘッダの境界線が近づけることはできます(ピッタリにはどうやらできません)。次のように修正すれば一応、部分的に解決できます。

before:
      <v-card
        class="pt-6 pl-2 pr-2"
        outlined
        tile
      >

after:
      <v-card
        class="pt-6 pl-2 pr-2 blue"
        outlined
        tile
        height="600"
      >

修正結果

しかしこの解決策をおこなっても、次のような問題点があります。

隙間は完全には埋まらない。原因はいまのところわかりません。どこかを修正すれば可能かもしれません。
heightの値はコードの量に応じて、毎回変更しなければならない(絶対値を設定しなければならない)。ヘッダまでピッタリとカードをつけるために、自動的にくっつけるような方法はわかりません。そもそもできるのかもわかりません。

サイドバーが開いていない場合、サイドの2つのカラムは両端まで広がっていない。

残念ながらわかりませんでした。

終わりに: 補足

上記のコードにおいて左側のカラムと右側のカラムにはv-cardがないにもかかわらずv-card-titleが使用されています。あまりいい使い方ではないかもしれませんので、別のタグに変更した方がいいかもしれません。

参考文献

僕から以上

問題点