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」
この説明をまとめると
・flex-boxを使って構築された12ポイントのGrid-systemが付いている
・画面サイズに応じた5種類のBreakpointsが存在する
・Breakpointsはカスタマイズ可能
です。1つ目が文章からだとわかりづらいので図で解説すると、1行のレイアウト(後に使うv-rowというディレクティブ)が12個のboxに分けられているイメージです。
Grid Systemの書き方・使い方
基本的な使い方
Vuetifyのディレクティブ、v-rowとv-colを使って実装します。
|
1 2 3 4 5 6 |
<v-row> <v-col>1</v-col> <v-col>2</v-col> <v-col>3</v-col> <v-col>4</v-col> </v-row> |
ここでv-colにcols=3というattributeを渡します。これによって1つのv-colが、12個で構成されたboxの中から3個分のboxを使ったレイアウト構成になります。言い換えると、v-rowの1/4のwidthが1つのv-colに割り当てられるレイアウトになります。
|
1 2 3 4 5 6 |
<v-row> <v-col cols="3">1</v-col> <v-col cols="3">2</v-col> <v-col cols="3">3</v-col> <v-col cols="3">4</v-col> </v-row> |
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%にしています。
|
1 2 3 4 5 6 |
<v-row> <v-col cols="3" lg="6">1</v-col> <v-col cols="3" lg="2">2</v-col> <v-col cols="3" lg="2">3</v-col> <v-col cols="3" lg="2">4</v-col> </v-row> |
より詳しい情報を得たい人は以下の海外サイトなどを読むといいかもしれません。
エンジニアにおすすめのアイテム
記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。
目の保温マッサージ
エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。
アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー
アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。
座椅子をゲーミングチェア風に
ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。
IKSTAR クッション 低反発 座布団 第五世代 オフィス
IKSTAR クッション 低反発【メーカー直営・１年保証付】 ランバーサポート
気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。