Cocoon新着記事・人気記事ブロックを横並び／カラム数をサイドバーで切り替えるカスタマイズ

/* 2列 */
.widget-entry-cards {
    display: grid; /* グリッドレイアウトを適用 */
    grid-template-columns: repeat(2, 1fr); /* 2列に分け、各列の幅を均等（1fr）に設定 */
    gap: 16px; /* 各グリッドアイテムの間に16pxの隙間を設定 */
}

/* 768px以下の画面幅のとき */
@media (max-width: 768px) {
    .widget-entry-cards {
        gap: 0; /* 隙間を0にする */
    }
}

このコードでは、.widget-entry-cards にグリッドレイアウトが適用され、幅768px以下の画面ではアイテム間の隙間が0になります。

/* 2列（モバイルで1列） */
.widget-entry-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に分け、各列の幅を均等（1fr）に設定 */
    gap: 16px; /* 各グリッドアイテムの間に16pxの隙間を設定 */
}

@media (max-width: 768px) {
    .widget-entry-cards {
        grid-template-columns: 1fr; /* モバイルでは1列にする */
        gap: 0; /* 隙間を0にする */
    }
}

このコードでは、通常は2列レイアウトですが、768px以下の画面幅では1列レイアウトに変更され、隙間が0になります。

/* 3列（モバイルで1列） */
.widget-entry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に分け、各列の幅を均等（1fr）に設定 */
    gap: 16px; /* 各グリッドアイテムの間に16pxの隙間を設定 */
}

@media (max-width: 768px) {
    .widget-entry-cards {
        grid-template-columns: 1fr; /* モバイルでは1列にする */
        gap: 0; /* 隙間を0にする */
    }
}

このコードでは、通常は3列レイアウトで、768px以下の画面幅では1列レイアウトに変更され、隙間も0に設定されます。

/* 3列（モバイルで2列） */
.widget-entry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列に分け、各列の幅を均等（1fr）に設定 */
    gap: 16px; /* 各グリッドアイテムの間に16pxの隙間を設定 */
}

@media (max-width: 768px) {
    .widget-entry-cards {
        grid-template-columns: repeat(2, 1fr); /* モバイルでは2列にする */
        gap: 0; /* 隙間を0にする */
    }
}

このコードでは、通常は3列レイアウトで、768px以下の画面幅では2列レイアウトに変更され、隙間が0になります。