WordPress,CoCoon ギャラリーの写真の列数が合わない時の調整方法

WordPressの「ギャラリー」は、写真を並べて表示するときに便利ですが、指定した列数で割り切れない数の画像を登録すると、余った画像だけ大きく表示されてしまい、デザイン上都合が悪くなる場合があります。そんなときは今回のCSSを「カスタムCSS」欄に書き込めば解決します。

CSS
サンプル・変更前
サンプル・変更後

CSS

/* ギャラリー本体をflexに */
.wp-block-gallery.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0;  /* まずは gap をゼロにして管理しやすくする */
}

/* 3列固定 ＋ 最後の1枚がデカくならないように */
.wp-block-gallery.is-layout-flex > .wp-block-image,
.wp-block-gallery .blocks-gallery-item {
    box-sizing: border-box;
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    padding: 0.1em !important;  /* 余白はここでつくる（好みで調整） */
    margin: 0;       /* margin は一旦ゼロに */
}