2列→2列 ｜my-custom-box-02 ｜hover-tiles-02 ｜stretched-link ｜text-decoration-none｜ w-100 ｜text-truncate｜ fw-bolder
コードウィジェット｜bootstrap javascript併用 トグル
「最初の表示数を固定したい」場合は、const keep = Math.ceil(cols.length / 2); を const keep = 12; のように変更してください。
bootstrap トグルのみ
前半と後半を手で分ける（自動で“半分に仕分け”はできない） 後半は .collapse の中にさらに .row を置き、その直下に .col-6（←ここ超大事。1列化の原因はたいていこれ） トグルの中身（「もっと見る ⇔ 閉じる」）を自動で文字切替したいなら、通常はJSが必要 でもCSSだけで切り替え“風”にする小技は下に置いときます👇
小技：ボタン文言の切替を“CSSだけ”でやる
もっと見る
2列→2列 hover-tiles-02
3列→2列→1列 hover-tiles-02 高さ調整なし
3列→2列→1列 カテゴリー名入り 高さ調整(合わせる)
フォントサイズ調整｜my-custom-box-01｜ hover-tiles-02 ｜stretched-link ｜text-decoration-none｜ w-100｜ text-truncate｜ font-adjust-m
4列→4列 ｜リンク有無可 ｜float-start
4列→4列 ｜リンク有無可 ｜<span>付与 ｜col-12 col-sm-3
bootstrap(トグル) もっと見る 閉じる｜２列→2列
・・・1・・・
・・・2・・・
・・・3・・・
・・・4・・・
・・・5・・・
・・・6・・・
・・・7・・・
・・・8・・・
・・・9・・・
・・・10・・・
フロート 左｜float-start ｜border ｜p-2 ｜d-flex ｜align-items-center ｜justify-content-center ｜m-1｜ shadow-sm｜ rounded-3 ｜border-2 ｜font-adjust-sm
