Как создать блок галереи где изображения разных размеров должны формироваться в сетку?

Для создания блока галереи с изображениями разных размеров, которые должны формироваться в сетку, вам потребуется использовать HTML, CSS и JavaScript.

1. Создайте HTML-разметку для блока галереи. Вам понадобится контейнер для галереи и отдельные элементы для каждого изображения. Например:

<div class="gallery">
  <div class="image"><img src="image1.jpg" alt="Image 1"></div>
  <div class="image"><img src="image2.jpg" alt="Image 2"></div>
  <div class="image"><img src="image3.jpg" alt="Image 3"></div>
  <!-- Добавьте столько элементов, сколько изображений вы хотите отобразить -->
</div>

2. Добавьте CSS-стили для блока галереи и изображений. Стилизуйте контейнер галереи и каждый элемент с изображением, чтобы они занимали место в сетке. Например:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f0f0f0;
}

.image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

В CSS коде выше мы использовали сетку CSS Grid для расположения изображений. Мы определили контейнер галереи как сетку с колонками, которые будут масштабироваться автоматически с минимальной шириной 200 пикселей. Мы также добавили отступы между элементами с помощью grid-gap. Каждый элемент с изображением стилизован как прямоугольник с фоновым цветом и изображение внутри выровнено по центру.

3. Используйте JavaScript для динамической загрузки изображений. Вам понадобится определить пути к изображениям и добавить их в HTML-разметку. Вы можете использовать JavaScript для создания элементов и добавления их в контейнер галереи. Например:

const gallery = document.querySelector('.gallery');

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
  // Добавьте пути к изображениям, которые вы хотите отобразить в галерее
];

images.forEach(image => {
  const imageElement = document.createElement('div');
  imageElement.className = 'image';
  imageElement.innerHTML = `<img src="${image}" alt="Image">`;
  gallery.appendChild(imageElement);
});

В JavaScript-коде выше мы определяем массив images, который содержит пути к изображениям. Затем мы используем forEach для перебора массива и создания элемента с изображением. Мы добавляем класс image к элементу и используем innerHTML для вставки изображения внутрь элемента. Наконец, мы добавляем элемент в контейнер галереи.

Таким образом, вы создали блок галереи, в котором изображения разных размеров формируются в сетку с использованием HTML, CSS и JavaScript. При желании можно дополнить эту реализацию адаптивностью и другими функциями, чтобы сделать галерею более интерактивной и удобной для пользователя.