カラムをPCで3列、スマホだと2列で行を送りたい

カラムを横並びにして、レスポンシブに行送りしたいのに、出来ない。。。
うまく出来る方法を教えて！


無料の機能だけだと、どうしてもスマホは1カラムだけになるみたい。
本来はCSSで設定するだけなのに、これにお金をはらうのはねぇ。。

通常のカラムに、CSS クラスをつけて、追加CSSを設定すれば出来るようになるよ。

1

class名をつける

「高度な設定」＞「追加 CSS クラス」に grid-pc3-sp2 と入力。

2

追加CSS

「外観」＞「カスタマイズ」＞「追加 CSS」に以下のコードをコピー＆ペースト

/* PC・タブレット（782px以上）で3列 */
@media (min-width: 782px) {
    .grid-pc3-sp2 {
        display: flex;
        flex-wrap: wrap;
    }
    .grid-pc3-sp2 > .wp-block-column {
        flex-basis: calc(33.33% - 16px) !important; /* 3列 */
        flex-grow: 0;
    }
}

/* スマホ（781px以下）で2列 */
@media (max-width: 781px) {
    .grid-pc3-sp2 {
        display: flex;
        flex-wrap: wrap;
        gap: 16px; /* 列間の隙間 */
    }
    .grid-pc3-sp2 > .wp-block-column {
        flex-basis: calc(50% - 8px) !important; /* 2列 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}