Как сделать адаптивную сетку изображений, которая меняет размер изображения в зависимости от количества изображений?

Question

Я пытаюсь создать адаптивную сетку изображений, которая делает изображения меньше, когда их несколько рядом друг с другом, и больше, когда есть, например, только одно изображение.

(Для лучшего понимания здесь ниже приведены некоторые фотографии ожидаемых результатов)

Фото 1:

Фото 2:

Я пробовал играть с максимальной шириной и минимальной шириной и использовать различные режимы отображенияно не повезло.Кроме того, я пробовал смотреть в интернете, но и мне не повезло.

.photos .content {
  width: 70%;
  min-height: 100%;
  margin-left: 15%;
  background-color: #F5F5F5;
}

.photos .content .grid {
  display: overflow: none;
}

.photos img {
  max-width: 30%;
  min-width: 25%;
  height: 30%;
}

<div class="panel photos">
  <div class="content" id="photos">
    <div class="grid">
      <img src="img/sample-images/sample1.jpg">
      <img src="img/sample-images/sample2.jpg">
      <img src="img/sample-images/sample3.jpg">
    </div>
  </div>
</div>

Answer 1

Я предполагаю, что есть 3 изображения в первом ряду и 3 во втором ряду.

Не задавайте ширину изображения как 30%, вместо этого укажите 100%

что это уменьшит размер согласно области просмотра

.grid {
  display: grid;
  grid-template-columns : repeat(3,1fr);
  grid-template-rows: repeat(2, 20vw);
  grid-gap: 10px;
}

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
}

ссылка CodePen

Answer 2

Используйте этот CSS в родительском контейнере

display:grid;
grid-template-columns:repeat( 3 (no. of images), 1fr );

Если вы продолжите добавлять изображения рядом с ним, он автоматически настроится на первый ряд