## 事象
[[Vuetify]]では`class="d-flex flex-column justify-center pa-6"`みたいにclassの指定でレイアウトの調整ができる。しかし、[[CSS]]のgapにあたるclassは存在しない。
`style="gap: 15px"`とやる代わりに`class="gap-3"`的なことをしたい。
## 解決方法
### Vuetify3の場合
marginの`m`、paddingの`p`と同じ要領で、gapの`g`が利用できる。
<div class="link-card">
<div class="link-card-header">
<img src="https://vuetifyjs.com/favicon.ico" class="link-card-site-icon"/>
<span class="link-card-site-name">Vuetify</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">Spacing — Vuetify</p>
<p class="link-card-description">Spacing helper classes allow you to apply margin or padding to any element in increments from 1 to 5.</p>
</div>
<img src="https://cdn.vuetifyjs.com/docs/images/graphics/og-image.png" class="link-card-image" />
</div>
<a href="https://vuetifyjs.com/en/styles/spacing/#how-it-works"></a>
</div>
以下のような感じ。
```html
<div class="d-flex ga-3"></div>
```
### Vuetify2の場合
[[Vuetify2]]は少なくとも #2023/06/21 時点で未対応っぽい。自作しなければいけなそう。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">[Feature Request] Make style class of 'gap' · Issue #15282 · vuetifyjs/vuetify</p>
<p class="link-card-description">Problem to solve When using row, column, flex, grid, we need the attribute gap. This does ... </p>
</div>
<img src="https://opengraph.githubassets.com/846cbd6a0b740730e349e8118fe95196b8103ec26c189ab63218eebaceb81222/vuetifyjs/vuetify/issues/15282" class="link-card-image" />
</div>
<a href="https://github.com/vuetifyjs/vuetify/issues/15282"></a>
</div>