![](https://cxg-design.jp/wp-content/uploads/2024/03/0384b172b07dc15eac4c3c5ebfee909a.png)
ModulaのCustom Grid、Masonryでレスポンシブギャラリーを作成
Modulaは、Creative Gallery、Custom Grid、Masonryの3つのレイアウトを選ぶことが出来ます。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
その中でも、Creative Galleryは、縦サイズをデバイスごとに設定することが出来ます。そのため、トップに1画面で表示することも簡単でした。
今回は、Custom GridとMasonryで、PCでは横長、SPでは縦長のレイアウトにして、1画面で表示する方法を紹介します。
DEMOは、1つ目がCustom Grid、2つ目がMasonryのギャラリーです。縦長、横長ともに6点、計12点の画像をギャラリーにしました。横長画像がボーダー、縦長画像がストライプになっています。
Custom Grid
![](https://cxg-design.jp/wp-content/uploads/2024/03/0384b172b07dc15eac4c3c5ebfee909a.png)
カスタムグリッドではレイアウトで横長に設定します。最後の段が揃うように設定しています。SPでは3カラムで、正方形のグリッドレイアウトになっています。
画像間の余白をなくすため、「Gutter」を0pxに設定します。Responsive Settingの、Custom responsivenessにチェックを入れ、Mobile Columnsを3に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/c4bc4afbffdb6f606b2291424d761c78.png)
レイアウトで横長に設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/c4dddcb4bd2a08366868860d8f4185c3-1.png)
「Gutter」を0pxに設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/7bdc09833c6c663bbe44a60f02e00e52.png)
Custom responsivenessにチェックを入れ、Mobile Columnsを3に設定
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Image Size | Medium |
Custom responsiveness | チェック有 |
Mobile Columns | 3 |
Masonry
![](https://cxg-design.jp/wp-content/uploads/2024/03/05b0f88e53467ceab22cb19483b2a9e1.png)
PC6カラム、タブレット4カラム、SP3カラムに設定します。PC、SPでは、縦長、横長画像を最後の段が揃うように並べました。
PCでは6カラムにするため、「Column Type」をSix Columns(6)に設定しています。毎回、見た目が変化しないよう、Shuffle Imagesのチェックはしません。Responsive Settingの、Custom responsivenessにチェックを入れ、Tablet Columnsを4、Mobile Columnsを3に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/18c9d77c70b004ad503366e3054c90f7.png)
PC、SPで、縦長、横長画像を最後の段が揃うように並べる。
![](https://cxg-design.jp/wp-content/uploads/2024/03/8d00f8dc7869f954c6259b8a66b71364.png)
4カラムにするため、「Column Type」をSix Columns(6)に設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/c1251277d21e249becdbcea9ba40145a.png)
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画面で表示できたら、トップでも使用しやすいですね。