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

1. Использование CSS Grid:
   • Определите элемент-контейнер для галереи.
   • Примените свойства CSS Grid (display:gridи grid-template-columns), чтобы создать макет сетки.
   • Поместите каждое изображение внутри элемента сетки внутри контейнера.

Пример кода:

<div class="gallery">
  <div class="item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Image 3"></div>
  <!-- Add more images as needed -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Adjust the number of columns as desired */
  grid-gap: 10px; /* Adjust the gap between images */
}
.gallery .item {
  /* Additional styling for each grid item */
}

2. Использование CSS Flexbox:
   • Создайте элемент-контейнер для галереи.
   • Примените свойства CSS Flexbox (display: flexи flex-wrap: wrap), чтобы изображения могли переноситься в несколько строк.
   • Оберните каждое изображение в элемент-контейнер.

Пример кода:

<div class="gallery">
  <div class="item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Image 3"></div>
  <!-- Add more images as needed -->
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  /* Additional styling for the container */
}
.gallery .item {
  flex: 0 0 33.33%; /* Adjust the width of each item based on the number of columns desired */
  /* Additional styling for each item */
}

3. Использование сторонней библиотеки:
   • Существует множество библиотек и платформ JavaScript, которые предоставляют готовые компоненты галереи, такие как Lightbox, Fancybox или Slick Carousel. Эти библиотеки часто предлагают дополнительные функции, такие как масштабирование изображения, нумерация страниц и переходы. Чтобы использовать их, вам необходимо включить файлы CSS и JavaScript библиотеки в свой HTML-документ и следовать предоставленной документации.

Не забудьте заменить URL-адреса изображений в приведенных выше примерах фактическими путями к вашим изображениям.