wordpress 投稿一覧を3行3列に配置したいです。

Question

前提・実現したいこと

teratailで初めての質問をさせていただきます。
浅い知識での質問となりますが、お手柔らかにお願いします。

ーーーーーーーーーーーーーーーーー

現在事業サイトをwordpressで作成しておりまして、「制作実績一覧ページ」に制作実績をカスタム投稿タイプで作成し管理画面の投稿から投稿しておりま
す。

上のの画像のように９枚並んでいるのを３行にし、
下の画像のように一行３つの制作実績を載せたいのですがこちらカスタム投稿タイプから作成しておりまして、一行３つに並べるにはどのようにコーディングすればよいかわかりません。
htmlのみのコーディングでしたら親要素を３つにして、３行作成するのですが、サブループでの投稿になりどのようにコーディングすればいいかわからない状態です。

下のソースコードのpiece-itemのところがパネルになっているのですが、これを１行に３段でかつ３行ある状態にしたいのですが、どのようにコーディングすればよいかわかりません。ググり方のヒントだけでもいただけますと幸いです。
よろしくお願いします

該当のソースコード

こちらが上でお話した制作実績一覧ページのコードです。

<main class="piece">
    <div class="cmn-mv"></div>
    <section class="piece-wrapper">
        <div class="inner">
            <div class="piece-cont">
                <ul class="piece-list">
<?php
$query_args = array(
    'post_status' => 'publish',
    'post_type' => 'works',
    'order' => 'DESC',
    'post_per_pages' =>9,
);
$the_query = new WP_Query( $query_args );
if ( $the_query->have_posts() ):
    while ( $the_query->have_posts() ):
        $the_query->the_post();
        $link = get_permalink( $post->ID );
        $thumbnail = (get_the_post_thumbnail_url( $post->ID, 'medium' )) ? get_the_post_thumbnail_url( $post->ID, 'medium' ) : get_template_directory_uri().$NO_IMAGE_URL;
        $title =get_the_title( $post->ID );
        $link =get_permalink( $post->ID );
?>
                    <li class="piece-item">
                        <a class="piece-box "href="<?php echo $link;?>">
                            <div class="title"><?php echo $title;?></div>
                            <div class="image"><img src="<?php echo $thumbnail;?>" alt=""></div>
                        </a>
                    </li>
<?php
    endwhile;
endif;
wp_reset_query();
?>
                </ul>
            </div>
        </div>

試したこと

正直どのようにググっていいか検討がつかず、ググり方のヒントだけでもいただけますとありがたいです。

補足情報（FW/ツールのバージョンなど）

wordpress5.8

Answer 1

こちらの記事が参考になるのではないでしょうか。
WordPressの記事を3カラムずつ表示させる方法 | テクノブレイブ

ちなみにこれは「wordpress ループ 分ける」で検索しました。

Comments

[yuta3224]

回答ありがとうございます。
教えていただいたサイトを確認しましたが、正直内容がまったくわからずといった形でした。
まだまだ未熟だったようです。出直してきます。

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