![](https://cxg-design.jp/wp-content/uploads/2024/03/cc7ad0d646aa3356b760d0152ff226f2.png)
ModulaのCustom Gridで、スクエアグリッドのギャラリーを作成
ModulaのCustom Gridは、トリミングの自由度が高い分、レイアウトに手間を取られることがあります。
今回は 、正方形で切り取って、レイアウトを統一して、縦長、横長画像問わず、綺麗に見えるレイアウトを紹介します。
1つ目は、SPでもレイアウトを変えないギャラリー、2つ目は、PCで一度にたくさん見れるギャラリー、3つ目は、デバイスの幅に応じで、カラム数が変化するギャラリーです。今回も、横長画像がボーダー、縦長画像がストライプになっています。
SAME LAYOUT
![](https://cxg-design.jp/wp-content/uploads/2024/03/869e1dbec496d849231b41ca28322e2c.png)
![](https://cxg-design.jp/wp-content/uploads/2024/03/ddc34c69b39589fcc50e4a06e8ac4ffd.png)
全て同じレイアウトのギャラリーです。PCでは1画面6点の画像が大きく表示でき、スクロールして見ていきます。SPでは、1画面で表示され、クリックして、拡大表示&スライダーで見ます。
2種類の大きさの正方形を、大1、小2の単位で12点レイアウトします。画像間の隙間を無くすため、Gutterを0にします。今回のDEMOの、Generalの設定は、3つとも同じです。Responsive>Custom responsivenessは、PC、SP同じレイアウトにするため、チェック無しです。
![](https://cxg-design.jp/wp-content/uploads/2024/03/eb82029fabc34c804954cb78b45874fe.png)
12点の画像をレイアウトします。
![](https://cxg-design.jp/wp-content/uploads/2024/03/8d7b65001687a1740560eeb69e0efb1c.png)
Gutterを0に設定
![](https://cxg-design.jp/wp-content/uploads/2024/03/2081dd122b623ebab61a239caf1c2769.png)
Custom responsivenessのチェックは無し
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Image Size | Medium |
Custom responsiveness | チェック無 |
WIDE LAYOUT
![](https://cxg-design.jp/wp-content/uploads/2024/03/3a1d8ccf91191fe47e3e6b9829e2e999.png)
PCでは1画面表示で、SPでは2カラムになり、スクロールで見せるレイアウトになります。
大小2種類の正方形を15点、横長にレイアウトします。SPでは、2カラムにするため、Mobile Columnsを2に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/306685d7c6be02d1bef140eb362436ef.png)
大小2種類の正方形を15点、横長にレイアウト
![](https://cxg-design.jp/wp-content/uploads/2024/03/46d775be8089a094be85a1d49d3410ab.png)
Mobile Columnsを2に設定
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Image Size | Medium |
Custom responsiveness | チェック有 |
Mobile Columns | 2 |
RESPONSIVE LAYOUT
![](https://cxg-design.jp/wp-content/uploads/2024/03/dc790b5472e6adf9f5f052d567f79825.png)
![](https://cxg-design.jp/wp-content/uploads/2024/03/dd78ddcf0a822b4c1e1abde11c439696.png)
![](https://cxg-design.jp/wp-content/uploads/2024/03/c0fd1333a43a91b1d8e44ce8cc8985bc.png)
PC3カラム、タブレット2カラム、SP1カラム表示のギャラリーです。全て同じ大きさの表示です。タブレットの分岐は、小さめで、約773pxです。画像の数を気にする必要がないレイアウトです。
9点の画像を1段3つづつ、同じ大きさでレイアウトしました。タブレット2カラム、SP1カラムにするため、Tablet Columnsを2、Mobile Columnsを1に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/03/5f5631308ba449f4b3afcfbbd5740c16.png)
9点の画像を1段3つづつ、同じ大きさでレイアウト
![](https://cxg-design.jp/wp-content/uploads/2024/03/f76e5f7f13235ac425de4133c9fbcd87.png)
Tablet Columnsを2、Mobile Columnsを1に設定
項目 | 設定値 |
---|---|
Gallery Type | Custom Grid |
Gutter | 0px |
Image Size | Medium |
Custom responsiveness | チェック有 |
Tablet Columns | 2 |
Mobile Columns | 1 |
以上で、今回の説明は終了です。レイアウトのバリエーションが多いと、ケースに応じで使い分けられますね。