ギャラリーページの作成

次はギャラリーページです。画像を並べるだけのシンプルなページですが、レスポンシブのグリッドを練習するのにちょうど良い題材です。

マークアップ

画像一覧は ul / li で組むのが基本です。

<ul class="gallery-list">
    <li class="gallery-item">
        <img src="img/pic-post-thumbnail.png" alt="..." width="1426" height="990" decoding="async" />
    </li>
    ...
</ul>

alt には、画像の内容が伝わる文言を入れます。装飾目的なら空でも良い場合がありますが、写真一覧では内容が分かる文言を入れる方が望ましいです。

グリッド

ブレイクポイントを分けて列数を変えます。

• 狭い画面：1列
• 少し広い画面：2列
• PC：4列（先頭2枚は横に2カラム分広がる）

.gallery-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
}

@media (width >= 400px) {
    .gallery-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width >= 768px) {
    .gallery-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery-item:nth-child(1) {
        grid-column: 1/3;
    }

    .gallery-item:nth-child(2) {
        grid-column: 3/5;
    }
}

PCでは先頭2枚だけ grid-column で横幅を広げ、その下の画像を4列で並べます。画像は aspect-ratio と object-fit: cover を使うと、サイズが揃って見た目が安定します。