◆当ページにはプロモーションが含まれています

Vue.js / Nuxt.js

【v-col v-row】Vuetify2.0でのレイアウトの作り方【グリッドが刷新!】

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のシステムに近いですね。向こうの場合は columnscolumn の組み合わせですが。

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

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

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

    <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を踏襲していますね!


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

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

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

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

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



 

追記: 2020年6月11日

グリッドシステムがそもそもわからない…という声にお応えして、Bootstrapを例に解説動画を作ってみました!

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

POSTED COMMENT

  1. […] 【v-col v-row】 Vuetify2.0になってグリッドが刷新! – レイアウトの作り方 編 V… […]

  2. […] 【v-col v-row】 Vuetify2.0になってグリッドが刷新! – レイアウトの作り方 編 V… […]

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です