Вот несколько способов создания адаптивной галереи с использованием HTML и CSS:

1. Flexbox: используйте CSS flexbox для создания адаптивной галереи. Настройте контейнер для отображения как flex и задайте для свойства flex-wrap значение обертывания. Это позволяет элементам галереи переноситься на новую строку, когда ширина контейнера ограничена.

2. Сетка: используйте сетку CSS для создания адаптивной галереи. Определите контейнер сетки и укажите необходимое количество столбцов. Используйте свойство Grid-template-columns для управления шириной каждого столбца. Элементы галереи автоматически переместятся в следующую строку, когда ширина контейнера уменьшится.

3. Медиа-запросы. Используйте медиа-запросы CSS для создания точек останова на экранах определенных размеров. Определите разные правила CSS для каждой точки останова, чтобы соответствующим образом настроить макет галереи. Это позволяет вам настроить внешний вид галереи для разных устройств или ширины экрана.

4. CSS-фреймворки. Рассмотрите возможность использования CSS-фреймворков, таких как Bootstrap или Foundation, которые предоставляют готовые адаптивные системы и компоненты сетки. Эти платформы упрощают процесс создания адаптивной галереи, предлагая готовые к использованию классы и стили.

5. Библиотеки JavaScript. Изучите библиотеки JavaScript, специально разработанные для создания адаптивных галерей, например Slick.js или Swiper.js. Эти библиотеки предлагают ряд функций, таких как жесты смахивания, кнопки навигации и адаптивные макеты.