《初心者必見》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」

Grid system — Vuetify.js
Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application.

この説明をまとめると

・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.

番外編:働くエンジニアにおすすめアイテム3撰

記事の内容とは別に、日々エンジニアの業務を行う上で役に立っているアイテムを紹介します。どれも実際に使って良いと思ったものだけ紹介していますのでその点はご安心ください。

目の保温マッサージ

毎日使っている目の保温マッサージ機です。使うと翌日の疲労感が全く違います。1日中PCと睨めっこの人は今すぐ購入することを強くお勧めします。

座っている時の負担を減らす

このサポート座布団を購入してからデスクワークの疲労が激減しました。価格も安く購入しやすいのでコスパ最強です。現在職場でも愛用しています。

自宅での作業効率をあげる椅子

ゲーミングチェアを購入して、自宅での作業効率が最大化しました。座った途端集中モードに入ります。家で作業する人は絶対に買っておきたいアイテムです。

エンジニアの基礎知識・教養

別の記事でエンジニアとして知っておくべき技術本についてまとめました。スキルの高いエンジニアは極々当たり前にしっている知識だとおもいますが、そうでない方はエンジニアとして最低限知らないとまずい知識ですのでどこかで購入し、読むことをお勧めします。

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