CSSのGrid Layoutについて

12分割のグリッドレイアウトについてですが、
画像の通り、理想のサイズ感で実装出来ずに困っております。

文章では伝わりづらいため、ペイントですが画像を添付させて頂きました。
グリッドレイアウトを使用しなければ実装は簡単なのですが、
Vuetifyをうまく利用してみたい為、相談になります。

また、画像では子要素にoffset1を追加していますが、
親要素に「col3, col3, spacer, col3」では余白が空きすぎる為、NGとしています。
サイズ的には画像下部の「offset1」ぐらいが理想ですが、明確なサイズはありません。

marlboro_tata

2020/03/22 00:42

書きかけでも良いので、実際に試したコードを質問に追記すると良いと思います。少し調べましたが、Vuetify にある機能では、それに類するものが見当たらないので、おそらく独自にCSSを書くことになるかな、と思いました。 col4などと決めずに、colのみで等分する方が上手くいきそうな所感です。

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか。

html
1<v-container>
2  <v-row>
3    <v-col cols="12" class="green">12</v-col>
4  </v-row>
5  <v-row >
6    <v-col class="red">a</v-col>
7    <v-col class="blue">b</v-col>
8    <v-col cols="1">1</v-col>
9    <v-col class="yellow">c</v-col>
10  </v-row>
11</v-container>