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

  • Plugin

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

     出典 : Modula Image Gallery

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

    SQUARE GALLERY

    GALLERY

    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同じレイアウトにするため、チェック無しです。

    12点の画像をレイアウトします。

    Gutterを0に設定

    Custom responsivenessのチェックは無し

    項目設定値
    Gallery TypeCustom Grid
    Gutter0px
    Image SizeMedium
    Custom responsivenessチェック無

    WIDE LAYOUT

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

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

    大小2種類の正方形を15点、横長にレイアウト

    Mobile Columnsを2に設定

    項目設定値
    Gallery TypeCustom Grid
    Gutter0px
    Image SizeMedium
    Custom responsivenessチェック有
    Mobile Columns2

    RESPONSIVE LAYOUT

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

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

    9点の画像を1段3つづつ、同じ大きさでレイアウト

    Tablet Columnsを2、Mobile Columnsを1に設定

    項目設定値
    Gallery TypeCustom Grid
    Gutter0px
    Image SizeMedium
    Custom responsivenessチェック有
    Tablet Columns2
    Mobile Columns1

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

    You may also like