Gutenbergエディターで「新着記事」ブロックを配置します。
以下のCSSを追加します。

/* 固定ページID=51971、新着記事ブロック */
/* 横並び、折り返す */
.post-51971 .new-entry-cards {
  display: flex;
  flex-wrap: wrap;
}

/* カード幅33.3%(3列) */
.post-51971 .new-entry-cards .a-wrap{
  width:33.3%; 
}

/* 画面幅480px以下の時、カード幅100%、1列 */
@media (width <=480px) {
  .post-51971 .new-entry-cards .a-wrap{
    width: 100%;
    max-width: unset;
  } 
}

@chu-ya 無知ですみません。このcssはどこに基準すればいいでしょうか

投稿者:: @takesht

↑

このcssはどこに基準すればいいでしょうか

何を言いたいか分かりません。
どこに記述すればいいのか？なら、以下のいずれかです。
あとはネット上にあるWordPressの基礎について、ご自分でお調べ下さい。

• [外観]→[カスタマイズ]→[追加CSS]
• 固定ページ下のカスタムCSS（この場合は、.post-51971のようにページの特定は不要です）
• 子テーマCSS

@chu-ya すみません「基準」は誤字で「記述」でした。

新着記事の方無事にできました。

人気記事も同様にやりたいと思ってるのですが

new-entry-cards の部分をpopular-ist-cards に変えれば人気記事の方も同様になりますか？

度々質問してお手数をおかけします。

投稿者:: @takesht

↑

popular-ist-cards

何を調べたのですか？
カスタマイズ以前に、CSSクラスの見方など、基礎を身に付けて下さい。

popular-entry-cardsです。

@takesht

ブロックエディターのソースコードで言うところの以下のような感じで3カラムを作成するとどうでしょうか。
ブロックエディターオプションの「コードエディター」にしてソースコードを放り込むと同様のことができるかと思います。

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>[new_list]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>[new_list]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>[new_list]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

パソコンでは3列で表示され

モバイルでは1列で表示されます。

既にご存知かもしれませんがショートコードの設定方法はこちら。
https://wp-cocoon.com/new_list/

@yhira ご丁寧にありがとうございます！

本当に感謝しています！

takeshtさん

本件「解決済」としてよろしいでしょうか。

それとも他にありますでしょうか。

フォーラム上部の案内にありますように、結果を書いていただけますと幸いです。

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

ご協力いただけますと、助かります。