リッチカラムで、「上3列 / 下2列」になったときも、下段を“3列幅のまま”中央寄せ

2025年12月19日

サンプル

作成するための要素

ブロック要素

CSS

/* リッチカラムで、「上3列 / 下2列」になったときも、下段を“3列幅のまま”中央寄せ */
@media (max-width: 781px){
  .rc-3to2-center > .swell-block-columns__inner{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }
  .rc-3to2-center > .swell-block-columns__inner > *{
    flex-grow: 0;
  }
}

Javascript

なし

備考等

リッチカラムブロックに、下記のCSSクラスを設定
rc-3to2-center

こちらはPC横並び、スマホ上３，下２のパターンだが、PCの方に設定したい場合は、メディアクエリを下記に変更すればOK！
@media (max-width: 781px){