AIにCSSイメージグリッドリスト横３列縦２行 レスポンシブと聞いてみた。

AIによる検索をそのまま利用しました。
まずHTML

<div class="grid-container">
  <div class="grid-item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="grid-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="grid-item"><img src="image3.jpg" alt="Image 3"></div>
  <div class="grid-item"><img src="image4.jpg" alt="Image 4"></div>
  <div class="grid-item"><img src="image5.jpg" alt="Image 5"></div>
  <div class="grid-item"><img src="image6.jpg" alt="Image 6"></div>
</div>

CSS

/* グリッドコンテナの設定 */
.grid-container {
  display: grid;
  gap: 15px; /* アイテム間の余白 */
  padding: 15px;
  /* スマホの基本設定：1列 */
  grid-template-columns: 1fr;
}

/* 画像の設定：親要素に合わせて伸縮 */
.grid-item img {
  width: 100%;
  height: 100%; /* 必要に応じて高さを指定 */
  object-fit: cover; /* 画像を切り抜いてきれいに配置 */
  display: block;
}

/* タブレット：2列 */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PC：3列 */
@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

以下に表示サンプル。
PC

タブレット

スマホ