🫠

【Vuetify】v-colのcols="n"の"n"の意味を勘違いしてた話

2023/10/15に公開

Vuetifyのグリッドシステムについて理解していなかったので自分用に記録。

<v-col>内で使用されるプロパティ、
col="n"の"n"は1つのcolumnを分割する数ではなく、
12個に分割されたcolumnをいくつ用意するかという値。

columnをケーキに置き換えてもよし。
col="2"は
✕ 1ホールのケーキを2つに分ける
○ 12個に分割されたケーキを2つ用意する

~余談~
//1//
最初この話をスクラップに投げちゃった。
解決済みの話は記事にしたほうがいいのかな。
記事にするほどのものでもない気がするけど。
//2//
Vuetifyのグリッドシステムって最初に書いてるけど、もとはといえばBootstrapのグリッドシステムに影響を受けている。

Discussion