Vuetify 3 で次のような横並びレイアウトを作っています。子要素同士の間に均等な余白を空けたいとき、最も適切なクラスはどれですか？ <div class='d-flex ___'> <v-btn>A</v-btn> <v-btn>B</v-btn> <v-btn>C</v-btn> </div>

解説

正解は ga-3 です。Vuetify 3 では margin の m、padding の p と同じ要領で、CSS の gap プロパティに対応する g プレフィックスのスペーシングヘルパーが用意されています。ga-3 は「gap all」の略で、Flexbox や Grid コンテナの子要素どうしの隙間をまとめて設定します。ma-3 は各子要素の外側に margin を付けるので「両端の外側にも余白がついてしまう」「margin相殺で意図と違う見た目になる」といった問題が起こりがちです。pa-3 は親の内側に余白を作るだけで、子要素間の隙間は埋まりません。mx-3 も似た理由で、両端の余分な余白問題が残ります。なぜ margin より gap の方が優れているのか子要素間の余白を作る昔ながらの方法は 子要素 + margin-right や :not(:last-child) でしたが、これは「最後の要素だけ余白を消す」工夫が必要で煩雑でした。gap はコンテナ側で「子の間隔」を一括指定できるので、要素が増減しても両端に余分な余白が出ません。Vuetify の ga-* はこの gap を簡潔に書くためのショートカットです。方向別のバリエーションmargin に mx(横)/my(縦) があるのと同じく、gap にも軸ごとの指定があります。ga-{n}: row/column 両方向の gap をまとめて指定gr-{n}: row-gap（縦方向の隙間）のみgc-{n}: column-gap（横方向の隙間）のみn は 0〜16 の整数で、1単位あたり 4px（ga-3 なら 12px）が基本です。Vuetify 2 にはこの g 系クラスは存在せず、Vuetify 3 から追加された機能なので「Vuetify gap クラスがない」と検索する人はバージョン違いを疑ってみてください。使い分けの実務感覚<!-- ボタンを横並びにして等間隔に並べたい --> <div class='d-flex ga-3'> <v-btn>保存</v-btn> <v-btn>キャンセル</v-btn> </div> <!-- カードをグリッドで並べて、行と列で違う隙間を空けたい --> <div class='d-grid gr-4 gc-2'>...</div>子要素間の余白は gap、親の内側は padding、要素単体のずらしは margin。この三役を意識して使い分けると、レイアウト崩れの大半が防げます。