ModulaのCustom Grid、Masonryでレスポンシブギャラリーを作成

Modulaは、Creative Gallery、Custom Grid、Masonryの3つのレイアウトを選ぶことが出来ます。

その中でも、Creative Galleryは、縦サイズをデバイスごとに設定することが出来ます。そのため、トップに１画面で表示することも簡単でした。

今回は、Custom GridとMasonryで、PCでは横長、SPでは縦長のレイアウトにして、１画面で表示する方法を紹介します。

DEMOは、1つ目がCustom Grid、2つ目がMasonryのギャラリーです。縦長、横長ともに6点、計12点の画像をギャラリーにしました。横長画像がボーダー、縦長画像がストライプになっています。

Custom Grid

カスタムグリッドではレイアウトで横長に設定します。最後の段が揃うように設定しています。SPでは3カラムで、正方形のグリッドレイアウトになっています。

画像間の余白をなくすため、「Gutter」を0pxに設定します。Responsive Settingの、Custom responsivenessにチェックを入れ、Mobile Columnsを3に設定します。

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

Masonry

PC6カラム、タブレット4カラム、SP3カラムに設定します。PC、SPでは、縦長、横長画像を最後の段が揃うように並べました。

PCでは6カラムにするため、「Column Type」をSix Columns(6)に設定しています。毎回、見た目が変化しないよう、Shuffle Imagesのチェックはしません。Responsive Settingの、Custom responsivenessにチェックを入れ、Tablet Columnsを4、Mobile Columnsを3に設定します。

項目	設定値
Gallery Type	Masonry
Column Type	Six Columns(6)
Gutter	0px
Width	100%
Image Size	1536×1536
Shuffle Images	チェック無
Custom responsiveness	チェック有
Tablet Columns	4
Mobile Columns	3

以上で今回の説明は終了です。DEMOは、12画像でしたが、画像の数に応じて列の数を調整します。1画面で表示できたら、トップでも使用しやすいですね。