ModulaのCustom Gridで、スクエアグリッドのギャラリーを作成

ModulaのCustom Gridは、トリミングの自由度が高い分、レイアウトに手間を取られることがあります。

今回は 、正方形で切り取って、レイアウトを統一して、縦長、横長画像問わず、綺麗に見えるレイアウトを紹介します。

1つ目は、SPでもレイアウトを変えないギャラリー、2つ目は、PCで一度にたくさん見れるギャラリー、3つ目は、デバイスの幅に応じで、カラム数が変化するギャラリーです。今回も、横長画像がボーダー、縦長画像がストライプになっています。

SAME LAYOUT

全て同じレイアウトのギャラリーです。PCでは1画面6点の画像が大きく表示でき、スクロールして見ていきます。SPでは、1画面で表示され、クリックして、拡大表示＆スライダーで見ます。

2種類の大きさの正方形を、大1、小2の単位で12点レイアウトします。画像間の隙間を無くすため、Gutterを0にします。今回のDEMOの、Generalの設定は、3つとも同じです。Responsive＞Custom responsivenessは、PC、SP同じレイアウトにするため、チェック無しです。

項目	設定値
Gallery Type	Custom Grid
Gutter	0px
Image Size	Medium
Custom responsiveness	チェック無

WIDE LAYOUT

PCでは1画面表示で、SPでは2カラムになり、スクロールで見せるレイアウトになります。

大小2種類の正方形を15点、横長にレイアウトします。SPでは、2カラムにするため、Mobile Columnsを2に設定します。

項目	設定値
Gallery Type	Custom Grid
Gutter	0px
Image Size	Medium
Custom responsiveness	チェック有
Mobile Columns	2

RESPONSIVE LAYOUT

PC3カラム、タブレット2カラム、SP1カラム表示のギャラリーです。全て同じ大きさの表示です。タブレットの分岐は、小さめで、約773pxです。画像の数を気にする必要がないレイアウトです。

9点の画像を1段3つづつ、同じ大きさでレイアウトしました。タブレット2カラム、SP1カラムにするため、Tablet Columnsを2、Mobile Columnsを1に設定します。

項目	設定値
Gallery Type	Custom Grid
Gutter	0px
Image Size	Medium
Custom responsiveness	チェック有
Tablet Columns	2
Mobile Columns	1

以上で、今回の説明は終了です。レイアウトのバリエーションが多いと、ケースに応じで使い分けられますね。