[js]cssでgridを組む際にダミー要素を追加する

未だに活躍の場があるっていうね。

活用シーン
組む

活用シーン

記事一覧をgridでこんな感じに組んだとする。

ul.post_list{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

子要素にあたる<li>はこの内容に従って、ブラウザ幅に合わせてサイズが変わったり1行あたりの記事数が変わる。幅指定しなくてもこれ一発で済むのでとても楽である。

だけど、記事が1つしかなかった場合、<li>は<ul>と同じ幅に拡張される。2つだった場合ははんぶんこになる。バカでかいのも問題だし、一覧のページャーを叩いて最後に来たときに急にデザインが変わるのは気持ち悪い。

minmaxの1frが問題なのは分かってるけど記事数が足りてるページは問題ないんで、ダミーの<li>を足してどうにかしてやろうという話。

組む

HTMLでこんな感じだったとする

<ul class="post_list">
    <li class="post"></li>
    <li class="post"></li>
    <li class="post"></li>
    <li class="post"></li>
    <li class="post"></li>
</ul>

1行に3記事を並べるとして、1ページの記事数がそれに満たない場合はこんな感じで対処する。

<ul class="post_list">
    <li class="post"></li>
    <li class="post"></li>
    <li class="dummy"></li> <!-- ダミー -->
</ul>

cssに関しては.dummyはmarginもpaddingも何もかも、厚みに関するものを0にしてしまえば変なスペースは生まれないんで大丈夫。

で、ネックのjs部分。1行に3記事並べるとしたらこうする。

$(function(){
    var postNum = $('ul.post_list > li').length;
    var minPostNum = 3;
    if(postNum < minPostNum){
        var dummyPostNum = minPostNum - postNum;
        for(var i=0; i<dummyPostNum; i++){
            $('#blogList ul.post_list').append('<li class="dummy"></li>');
        }
    }
})

jQueryライブラリをあわせて読み込んでください。3系で動きます。

表示される記事数（<li>の数）ｗを拾ってきて、指定数未満なら足りない数を出して、その回数forを回して.dummyを生成する。

おしまい。