《初心者必見》VuetifyのGridSystemの使い方がわかったので共有

Vue.js

Grid Systemについて

Vuetify公式サイトのGrid Systemの説明

業務でVue.js開発におけるUIライブラリ「Vuetify」を使う機会があり、その中で「Grid System」という仕組み、使い方を理解したのでその知識を共有します。まず公式サイトに書かれている説明を紹介します。

Vuetify comes with a 12 point grid system built using flex-box. The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl. These resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the Breakpoint service.

引用:「Grid system」

https://vuetifyjs.com/en/components/grids

この説明をまとめると

・flex-boxを使って構築された12ポイントのGrid-systemが付いている

・画面サイズに応じた5種類のBreakpointsが存在する

・Breakpointsはカスタマイズ可能

です。1つ目が文章からだとわかりづらいので図で解説すると、1行のレイアウト(後に使うv-rowというディレクティブ)が12個のboxに分けられているイメージです。

Grid Systemの書き方・使い方

基本的な使い方

Vuetifyのディレクティブ、v-rowv-colを使って実装します。

ここでv-colcols=3というattributeを渡します。これによって1つのv-colが、12個で構成されたboxの中から3個分のboxを使ったレイアウト構成になります。言い換えると、v-rowの1/4のwidthが1つのv-colに割り当てられるレイアウトになります。

Breckpointを使った書き方

公式サイトを読むと画面のwidthによって以下の5つのセクションに分けられています。

Extra small

xs

600px 未満

Small

sm

600px 以上 960px 未満

Medium

md

960px 以上 1264px 未満

Large

lg

1264px 以上 1904px 未満

Extra large

xl

1904px 以上

このattributeをv-colに付与することによって画面サイズに応じたレイアウト比率の変更が簡単に行えます。例えば以下のコードですとlargeの時のみ1のboxのレイアウトの比率を50%にしています。

より詳しい情報を得たい人は以下の海外サイトなどを読むといいかもしれません。

Learn How To Use Vuetify's Grid System - Chunk Bytes
Follow this short tutorial and learn how to use Vuetify's Grid System in no time! It will make reading the documentation much easier later on.

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました