[ 解決済 ] 画像3カラム複数行の実装について【再】

[junon]

トピックは削除できないようなので、何度も投稿し本当に申し訳ありません。

再度になりますが、よろしくお願いします。

今までは、HTMLで書いていたのと、
カラムブロックを使っても、大体複数カラムで1行なので、気になってなかったのですが
画像だけでなくても、3カラム複数行の場合は、どのように実装されているのでしょうか？
希望は、VK Blocks Proの投稿リストのように、スマホ、タブレットでも左から順に並べたいです。

添付画像をご覧ください。
パターンAのように、1行3枚で普段作っているので、
2行6枚だから、複製し作りました。
順番はタブレット、スマホとも問題ないのですが、
タブレットでは空欄ができてしまう。

パターンBだと、1カラムだけで上下に2枚配置したが、
空欄は最後に行き、途中に入ることはなくなった。でも大きな空欄になる。4カラムなら気にならないかも。
ただし、順番はタブレット、スマホとも問題ありです。

パターンCは、VK Blocks Proのグリッドカラムで作成し、意図したとおり、完璧でした。

とりあえずは、解決なのですが、

• グリッドカラムは、こういう使い方であっているのか？
• コアに入っているブロックで、同じようなことができるものがあるのか？
• 本来こういう場合は、VK Blocksの何かを使うべき、VK Blocks Proの何かを使うべきなど、他の実装方法があるのでしょうか？

など、どのように実装されているのか教えてほしいです。
ベクトル製品、WordPressコア以外のブロック、プラグイン等の情報はご遠慮します。

私はこうしてる。みたいな個人の実装方法でも構いません。
よろしくお願いします。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

グリッドカラムは、こういう使い方であっているのか？

あっていると思います。私もグリッドカラムをこのように使っています。

画面幅ごとにカラム数を指定できるので便利ですよね。とてもありがたいブロックです。

コアに入っているブロックで、同じようなことができるものがあるのか？

画像を並べることに限定すれば、WordPress のギャラリーブロックを使うこともあります。

添付画像をご覧ください。

3カラムで5枚の画像を表示すると、3で割り切れない部分が大きく表示されますが、
以下の CSS で大きさを揃えています。

.wp-block-gallery .blocks-gallery-item { flex-grow:0; }

割り切れない部分が大きく表示されることを利用して、
以下の CSS で大きい画像を最初に配置して見せたりもします。
新着作品の画像一覧で、あとから(最後に)追加したものが先頭に大きく表示されるという使い方です。

.blocks-gallery-grid { flex-flow: row wrap-reverse; }

• この返信は3年、 10ヶ月前に対馬 俊彦が編集しました。

Attachments:

You must be logged in to view attached files.

[石川＠Vektor,Inc.]

僕としてはそういう用途のためにグリッドカラムブロックを用意したので、グリッドカラムブロックで良いと思いますー。

[浅川幸宣]

こんにちは。
VK Blocks Proのグリッドカラム以外の選択肢として、

・画像のみの場合には、ギャラリーブロック
・コンテンツ（画像、文字、ボタンの組み合わせ）のような場合には、コードを書く

で対応しておりました。

[Chiaki Sugishita]

私も参加させてくださいー！
と言いつつも、みなさんと同じ意見です笑
コアのブロックではできないものと諦めてます。
対馬さんのようにcssでどうにかしようとすら考えてませんでした。
対馬さん、お知恵を授けてくださりありがとうございます！

実際、グリッドカラムはかなり多用しています。
以前、アドベントカレンダーでも書きましたが、グリッドカラムにめちゃくちゃ助けられました。
まぁこのときはかなりイレギュラーな使い方をしていますが笑
参考までにURL貼っときます。

WooECFesJapan2020でサイト構築をしたときのお話

それと、グリッドカラムでつい最近気づいたことなんですが、このブロックはBootstrap4で書かれているので、グリッドカラムアイテムのクラス名に”d-flex”を与えてあげると隣同士のカラムの高さを自動で揃えてくれるんですね！
めちゃくちゃ便利になりました。
そんなの知ってたよって方々ばかりかと思いますが、この事に気づいたときは涙が出るほど嬉しかったです笑

[junon]

皆さん、回答ありがとうございます。

投稿したあともgoogleで記事を探しましたが、複数行のことはほとんど記事がありませんでした。

1つあったのは、パターンBのようにカラムブロックを利用し、1つのカラムに上下にすべて入れ込む。それをCSSで回り込ます。と言う記事でした。
順番等、意図したとおりになりますが、結構強引に感じました。

皆さんの回答から、コアのカラムブロックでは難しい。ということが確認できました。

また、VK Blocks Proのグリッドカラムを当たり前のように活用されていることを知りました。いろんなヒントもありがとうございます。

グリッドカラムの価値に気づかず、使っていなかった私は、もったいないことをしてました。

これからは、どんどん使って、楽をして実装していきたいと思います。

皆様、貴重なご意見ありがとうございました。

[投稿者]

投稿