グリッドカラムブロックで特定のアイテムだけ幅を大きくする方法

特定のアイテムだけ幅を大きくするには

VK Blocks Pro の グリッドカラム は画面幅ごとにカラム数を指定できるのでとても便利でよく使っていますが、たまにこのブロック(グリッドカラムアイテム)だけ幅を大きくしたいと思うときがあります。

そのときは、大きくしたいグリッドカラムアイテムの [追加 CSS クラス] に col-**-* の指定を入力すればよいです。

[追加 CSS クラス] に入力した指定は VK Blocks Pro が出力するクラスよりも優先されます。

以下の例では【３】の [追加 CSS クラス] に col-xl-6 col-xxl-6 col-md-12 col-lg-12 col-sm-12 を入力してあります。

上記のグリッドカラムは画面幅が md と lg のときに【2】の右に空きスペースができてしまいますので、その対策として order プロパティを使って位置を調整する必要があります。

空きスペース対策

以下の例ではグリッドカラムアイテムに [追加 CSS クラス] を入力して、カスタム CSS で位置を調整しています。

カスタム CSS

以下の CSS で、画面幅が md と lg のときに【３】と【４】の順番を入れ替えています。

.gc-item-1 { order: -4; }
.gc-item-2 { order: -3; }
.gc-item-3 { order: -2; }
.gc-item-4 { order: -1; }

@media (min-width: 7568px) and (max-width: 1199px) {
.gc-item-3 { order: -1; }
.gc-item-4 { order: -2; }
}