GridレイアウトをCSSを利用したものに変更しました

{{ $size := "200x" }}
{{ $mobileSize := "100x100"}}

<div class="img-view">
    {{ range $idx, $elem := .Params }}
        {{ $res := resources.GetMatch $elem }}
        {{ $image := $res.Resize $size }}
        {{ $imageWebP := $res.Resize (printf "%s %s webp q70" $size) }}

        {{ $mobileImage := $res.Fit $mobileSize}}
        {{ $mobileImageWebP := $res.Fit (printf "%s %s webp q70" $mobileSize) }}

        {{ $imageURL := $image.RelPermalink }}
        {{ $imageWebPURL := $imageWebP.RelPermalink }}

        {{ $mobileImageURL := $mobileImage.RelPermalink }}
        {{ $mobileImageWebPURL := $mobileImageWebP.RelPermalink }}
        <a href="{{ $res.RelPermalink }}" target="_blank">
            <div class="thumb-img">
                <picture class="pc">
                    <source srcset="{{ $imageWebPURL }}" type="image/webp" >
                    <img src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
                </picture>
                <picture class="sp">
                    <source srcset="{{ $mobileImageWebPURL }}" type="image/webp">
                    <img src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
                </picture>
                <p class="pc">クリックで拡大</p>
            </div>
        </a>
    {{ end }}
</div>

.img-view{
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: repeat(3, auto);
    grid-row-gap: 0;
    grid-column-gap: 10px;
    justify-content: start;
    align-content: start;

    ...
}