CSS Grid×aspect-ratio のレスポンシブ対応。スマホでの最適なアスペクト比は4:3？16:9？

和哉からの回答：スマホの場合って4/3がいいのかな？

【実戦】aspect-ratioをレスポンシブで使いこなす

See the Pen Untitled by 広瀬和哉 (@lpvcfdes-the-styleful) on CodePen.

実装コードと解説（レスポンシブ追加版）

/* PCでの指定（再掲） */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 昨日のTips：repeat関数活用 */
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ★画像の外側の枠（アスペクト比固定：PC） */
.grid p.img {
  aspect-ratio: 4 / 3; /* 一昨日の復習：PCでは4:3で固定 */
  overflow: hidden; /* ★重要：ホバー拡大した画像がはみ出ないようにする */
}

/* 子要素：画像自体の設定 */
.grid p.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ★動きを滑らかにする設定 */
  transition: transform 0.5s ease; /* 心地よく動かす（昨日のおもてなし） */
}

/* ★ホバー時の動き */
.items:hover p.img img {
  transform: scale(1.1); /* 主流のtransform scale（パフォーマンス重視） */
}

/* 【追加】スマホでの指定 */
@media screen and (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr; /* ★スマホでは1列に変更（CSS Gridの真骨頂） */
  }

  /* ★ここがプロの技！ */
  .grid p.img {
    aspect-ratio: 16 / 9; /* スマホでは横長の16:9に変更（優しさの設計） */
  }
}

解説： media screen で「比率」まで変える

• media screen (max-width: 767px): これを使って、スマホでのスタイルを記述します。
• 1fr: 昨日のGridの記事では、`1fr 1fr 1fr` と `repeat(3, 1fr)` の書き分けを解説しましたが、スマホではシンプルに `1fr`（1列）にするだけで完結します。
• aspect-ratio: 16 / 9;: これが一番のポイントです。 media screen の中に記述することで、スマホでのアスペクト比のみを「16:9（横長）」に上書きします。PCでの指定を「上書き」するので、PCでの指定（4/3）はそのままで、スマホだけ16:9になる、効率的なコード設計です。

まとめ：技術の集大成で、崩れない「型」をスマホにも