Как сделать адаптивную галерею картинок

Короткий ответ

Сетка с автоматическим числом колонок и квадратные картинки:

<style>
  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
</style>
 
<div class="gallery">
  <img src="/media/photo-200x200.jpg" alt=""><img src="/media/photo-400x250.jpg" alt="">
  <img src="/media/photo-600x200.jpg" alt=""><img src="/media/photo-800x500.jpg" alt="">
  <img src="/media/photo-400x250.jpg" alt="">
</div>

Как это работает

aspect-ratio: 1 делает каждую ячейку квадратной, а object-fit: cover заполняет квадрат картинкой, обрезая лишнее, вместо того чтобы её растягивать. Поэтому фото разных пропорций выглядят как ровная плитка.

Другие пропорции

Для пейзажей подойдёт aspect-ratio: 4 / 3 или 16 / 9. А если обрезать нельзя, используйте object-fit: contain — картинка поместится целиком, а по краям останутся поля.

Частая ошибка

Без display: block под каждой картинкой появляется тонкая полоска в несколько пикселей: картинка по умолчанию строчная и стоит на базовой линии текста. А без width: 100% картинка не сжимается до ячейки и вылезает из сетки.