【v-col v-row】Vuetify2.0でのレイアウトの作り方【グリッドが刷新！】｜ProgLearn｜エンジニアのためのプログラミング情報メディア

VueでCSSを作るための強い味方、Vuetify先輩！

みなさま、こんにちは。どんぶラッコです。

皆さんはCSSフレームワークは何を使っていますか？

Vue使いならば、Vuetifyを使っている人も多いと思います。

このVuetify、実は先月バージョンが2系にアップデートされました。

レイアウトをMaterial Designに寄せて一新したよ！というのがメインのアップデートですが、破壊的アップデートも含む、かなり大幅なアップデートでした。

Qiitaにも「outlinedオプションを使いたい」というテーマで投稿しました(いいねがついていないのが悲しい)

その中でも、私が注目したいのはグリッドシステムに関するアップデートです。

今までVuetifyのグリッドシステムといえば、 v-layout , v-flexを使うものでした。ちょっと想像しづらい名前でしたよね。

それがどう変わったのか？ご紹介したいと思います。

col, row システムに刷新！

では、具体的に何が変わったのでしょうか？

レイアウトの指定方法が変わっています。

v-containerはサイトコンテンツを中央寄せして、パディングしてくれます。fluid(流体って意味らしいです)オプションを使うとコンテンツを幅いっぱいに広げてくれます。

v-rowはその名の通り、行(row)の定義ですね。 It uses a standard gutter of 24pxとありますので、こちらも余白をとってくれます。使わないようにするには、dense オプションで少なめにするか no-gutterで完全になくすか、です。

v-colということは列(column)です。

基本的にはこれだけです。

つまり、v-containerでエリアを作ってあげて、その中でv-rowで行を作り、その中にv-colを詰め込むことでレイアウトを作ることができるわけです。

なので、図のように、1行の中に列が3つあってもいいわけです。

そしてv-colの数によって勝手に調整してくれる、というわけです。

こうやってみると、bulmaのシステムに近いですね。向こうの場合は columns と column の組み合わせですが。

また、v-colの区切り方は基本的には等分ですが

colsプロパティを使うことで、カラムの重み付けをすることができます。

↑は公式サイトからの引用です。例えば、１行目のサンプルコードを見ると、こんな感じです。

    <v-row
      class="mb-6"
      no-gutters
    >
      <v-col
        v-for="n in 3"
        :key="n"
        :cols="n === 2 ? 6 : undefined"
      >
        <v-card
          class="pa-2"
          outlined
          tile
        >
          {{ n }} of 3 {{ n === 2 ? '(wider)' : '' }}
        </v-card>
      </v-col>
    </v-row>

2 of 3 の時だけ、 cols オプションに6を指定していますね。

ちなみに、 container の中で行(row)と列(col)を作るというやり方はBootstrapを踏襲していますね！

＞＞BootStrapのグリッドシステムについてざっくり理解！ — ウノプロ！

リリースノートにグリッドシステムの大幅な刷新と記載があった通り、かなり直感的に使いやすくなっていますね！

個人的には、 alignやjustifyの設定がalign="center"の形で指定できるようになったのがかなり嬉しいです。Vueのdataとして保持させられますからね！

これから開発していく箇所については、早速こちらのグリッドシステムを使っていこうと思います。

また、Vuetifyには便利なプリセットCSSクラスが沢山あるので、それも併せて活用しちゃいましょう♪

なお、Vueをより体系的にインプットしたい方は、こちらの書籍がおすすめです。周りの初学者には必ず勧めている書籍です！

＞＞Vuetifyで役に立つプリセットCSSクラス達！【テキスト編】