Hugo: 記事一覧を「タイル（カード）形式」にする

ホームやセクション一覧のテンプレートを上書きします。最小構成はこれだけ。

layouts/_default/list.html（セクション一覧・タグ一覧などに効く）

{{ define "main" }}
<main class="container">
  <div class="card-grid">
    {{ range .Paginator.Pages }}
      <article class="card">
        <a href="{{ .RelPermalink }}">
          {{/* サムネイル優先度: params.thumbnail → resources */}}
          {{ $thumb := .Params.thumbnail }}
          {{ if not $thumb }}
            {{ with .Resources.GetMatch "featured*" }}{{ $thumb = .RelPermalink }}{{ end }}
          {{ end }}
          {{ if $thumb }}<img src="{{ $thumb }}" alt="" class="card-thumb">{{ end }}
          <h2 class="card-title">{{ .Title }}</h2>
          <p class="card-summary">{{ with .Summary }}{{ . | plainify }}{{ end }}</p>
          <time class="card-date" datetime="{{ .Date }}">{{ .Date.Format "2006-01-02" }}</time>
        </a>
      </article>
    {{ end }}
  </div>

  {{ template "_internal/pagination.html" . }}
</main>
{{ end }}

簡易CSS（好きな場所でOK。例：assets/css/cards.css を Hugo Pipes で読み込み）

.container{max-width:1100px;margin:0 auto;padding:1rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{border:1px solid #ddd;border-radius:12px;overflow:hidden;background:#fff}
.card a{display:block;text-decoration:none;color:inherit;padding:0}
.card-thumb{width:100%;height:160px;object-fit:cover;display:block}
.card-title{font-size:1.1rem;font-weight:700;padding:0.75rem 1rem 0}
.card-summary{padding:0.25rem 1rem 0.5rem;color:#555}
.card-date{display:block;padding:0 1rem 1rem;color:#888;font-size:0.9rem}

layouts/partials/head.html などで読み込み（Hugo Pipes例）

{{ $cards := resources.Get "css/cards.css" | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $cards.RelPermalink }}">

ホームの一覧だけタイルにしたい場合は、layouts/index.html を上記の list.html と同様の中身で作れば OK です。