前略、JJOI さん

ご希望の表示とピッタリ合っているかどうかは、わかりませんが、Cocoonには、「フロントページタイプ」という機能があるので、CSSを書かなくても似たような表示にすることができます。

以下にやり方を書き込みますので、気に入るかどうか試してみてみてください。

JJOI さん

トップページは固定ページではなく、通常のブログのトップページを利用します。

Cocoon設定の「インデックス」タブの設定で、「フロントページタイプ（β版）」のところを「カテゴリごと（２カラム）」にします。（デフォルト以外ならなんでもいいのですが、とりあえずです。）

JJOI さん

次に同じくCocoon設定の「インデックス」タブの設定で「カードタイプ」のところを「縦型カード3列」にします。

同じページの少し上の方にある【「カテゴリごと」表示カードで表示数を変更する場合はこちら）】の小さな文字をクリックすると、「新着エントリーカード表示数」と「カテゴリーエントリーカード表示数」を選択できるプルダウンメニューが表示されますので、「新着エントリーカード表示数」を「３個」にします。

この状態で「変更をまとめて保存」のボタンをクリックして変更を確定します。

JJOI さん

すると、新着記事が横３列に表示されるようになります。

JJOI さん

新着記事の表示数を「6個」に設定すれば、横３列、縦２列の表示になります。

また、最初に設定した「フロントページタイプ（β版）」のところは、「タブ一覧」「カテゴリごと」のバリエーションが選べます。

JJOI さん

おすすめカードは、ウィジェットなので、そのままで有効になるかと思います。

お気に召すかどうかわかりませんが、一度、試してみてください。

JJOI さん

ちなみに、ショートコードでローカルのテストサイトでデベロッパーツールで試してみたら、以下のような感じっぽいです。

簡単に試しただけなので間違っているかもしれません。

[new_list count=6 type=large_thumb snippet=1 children=1]

.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.new-entry-card-link.widget-entry-card-link.a-wrap {
   width: 33%;
}

@media screen and (max-width: 834px) {
   .new-entry-card-link.widget-entry-card-link.a-wrap {
      width: 49%;
   }
}

あ、ちなみに６個でテストしました。

リフィトリーさん

ご丁寧に何案も出していただきありがとうございます。

1つ目の案で見出しなどをカスタマイズしながら利用させていただこうと思います。

ありがとうございました！

またよろしくお願いします。

@jjoi さん

見出しというかリストタイトル部分は、「フロントページタイプ」の機能を使った場合でも、CSSのコードが、そのまま流用できるかもしれませんね。