16:9 アスペクト動画グリッド
動画サムネイルを縦横比16対9のまま、画面幅に応じて自動で折り返すグリッドです。比率の維持は aspect-ratio:16/9 で行い、列数は grid-template-columns の auto-fill と minmax で「最小幅を割らない範囲で詰める」よう自動計算しています。
解説
動画サムネイルを縦横比16対9のまま、画面幅に応じて自動で折り返すグリッドです。比率の維持は aspect-ratio:16/9 で行い、列数は grid-template-columns の auto-fill と minmax で「最小幅を割らない範囲で詰める」よう自動計算しています。これにより、どんな画面でもサムネが歪まず整然と並びます。
動画ギャラリー、オンライン講座の一覧、YouTube風のカード並び、ポートフォリオの映像作品集などに向いています。サムネ部分を実際の img や video に差し替えれば、そのまま実サイトで使えます。
カスタマイズのポイント
- 列の最小幅は
minmax(220px,1fr)の数値で調整します。小さくするほど一度に多く並びます。 - カード間のすき間は
gapで変えられます。 - 比率を変えたい場合は
aspect-ratioを4/3や1/1に書き換えます。 - 実画像を入れる際は
widthとheight属性とloading="lazy"を付けると表示崩れと読み込み負荷を抑えられます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
サムネの比率を16対9以外にできますか。
できます。サムネ要素のaspect-ratioの値を4/3や1/1などに変更すれば、すべてのカードがその比率で揃います。
1行に並ぶ枚数はどう決まりますか。
minmaxで指定した最小幅と画面幅から自動で決まります。最小幅を小さくすると枚数が増え、大きくすると減ります。固定したい場合はrepeatの数値を直接指定します。