現在のままでも別段問題はなく、モバイルなどで小さい画面で見るのであれば箇条書きのようなリストの方が見やすいかもしれませんが、大きな画面ではサムネからでも内容がどういうものかを確認できるために、箇条書きよりもサムネがまんま見れるほうが良いこともあります。

見ていただければわかるように、TVerのcssの仕様で右側が空いているのに詰めずに大きな画面でも小さくなっても隙間が右側にあります。もちろんもっと小さい画面になれば先に書いたように箇条書きになりますので右側の隙間は大した問題にはならないわけですが…。

サンプル

このように、青バックの赤枠で示した部分右側に空きスペースがあります。これは最大表示した場合でも同じです。この微妙なスペースは全く不要だと思うので無くしてしまえと言うのが今回の目的です。

左側がやや狭いPCでの画面、右側が全画面ウィンドウでの表示。このように無駄なスペースがあります。

どのように修正するかは以下の方法(2024/12/19 実際に使用しているものに更新)

別に、以前のものでも動作しているとは思うのですが、不要だった部分をなくし無駄な部分(無駄かもしれない部分)を追加しました。

[class^="result-list_list__"],
[class^="specials-page-main_specialList"],
[class^="special-episode-list_containe"],
[class^="newer-page-main_episodeList"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

@media (width < 990px) {
    [class^="episode-pattern-b-layout_container"],
    .special-episode-list_container__pKWmv,
    [class^="newer-page-main_episodeList"] {
        display: grid !important;
        gap: 20px 14px;

        [class^="episode-pattern-b-layout_container"] {
            position: unset;
            display: inline-block;

            [class^="episode-pattern-b-layout_imgWrapper"] {
                width: 100%;
            }

            [class^="episode-pattern-b-layout_mediumMeta"] {
                padding: 1rem 0 0;
                height: initial;
            }
        }
    }

    [class^="result-list_list__"] {
        gap: 1rem;
    }

    [class^="episode-pattern-b-layout_container"] {     
        [class^="episode-pattern-b-layout_thumbnail__"] {
            width: 100%;
        }
    }
}

/*必要であれば。サイドバーと関連動画などを消して動画をより大きく無駄を省く*/
[class*="sidebar"],
[class*="recommended"] {
    display: none;
}

このcssを例えばブラウザのstylusなど外部cssを管理できる拡張機能に書いて実行。

一番上の、

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important

ここがキモで、@media以降は、画面が960px以下になった時のスタイルを打ち消すあるいは上書きするものです。

特に、repeatの中のminmax(240px, ifr)が重要です。

これは、例えば240pxにすると5列で表示できるブラウザの画面幅1であれば、240px → 250pxの値にすると4列で表示できるようにもできます。たった10pxの差でも変わりますが狭い画面になれば結局1列なので同じようになります。これらはminmaxの最小値～自動調整が効いているので画面サイズがxxの時にn pxにしようなどと考えなくても良いわけです。

minmaxとは、gridで使用されるもので、上記例で言うと240px以上～100%の範囲でサイズが調整されるということになります。たくさんアイテムが並んでいる時は240pxを基準に、gapのマージンも含む幅に合わせてそのサイズが調整されます。

画面が小さくなり800px程度になると元々の親要素の左右マージンもあるため2列になります。その時のアイテムの画像サイズはおおよそ350pxぐらいです。更に画面幅が小さくなり1列表示になるとおおよそ500pxぐらいで表示されるでしょうか。

TVerでは、いくつか@mediaで表示を切り替えているようですが、各タイトル一覧のページではこれら画面サイズでの調整は不要です。勝手にgridが表示してくれます。ただし、今回のcssではそれら@mediaの仕様もあり、区切り区切りでスムースにレスポンシブな表示にはなっていません。
それらをスムースに実行するようにするのであれば、それらを打ち消すスタイルを書く必要があります。ただ今回のcssではそれら打ち消しのカウンターcssがなくても!importantをつけているため問題はなくサムネの表示ができるだろうと思います。

本来は960px以下になると箇条書き風味になるわけですがこれはgridからflexに変更する事で成されています。これをflexにさせないようにgridのままにすることでスマホなどの小さい画面ではサムネイルの下にタイトルが出るようなカードタイプのような感じにすることができます。

また、タブレットなどもう少し画面幅を取れるものであれば、2列であったり3列であったりその幅に合わせてレスポンシブに変更されます。

修正するとこうなる

このように、これまであった無駄なスペースは無くなってサムネイルが自動で調整されるようになります。