Галерея изображений на сайте

Question

Необходимо сделать галерею изображений на сайте, такую, чтобы картинки разного размера, размещались в 5 колонок, но без row(?), то есть, чтобы нижняя картинка прилипала к верхней.

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

Пытался сделать display: grid;, но получается вот это:

А вот как мне нужно:

Answer 1

index.html

<!-- Блок, со списком изображений -->
<div class="content">
    <img src="image_1.webp" class="content__image">
    <img src="image_2.webp" class="content__image">
    <img src="image_3.webp" class="content__image">
    <!-- ...и так далее -->
</div>

style.css

.content {
    line-height: 0; /* Убираем высоту строки у всех изображений */
    column-count: 5; /* Устанавливаем кол-во колонок */
    column-gap: 0; /* Убираем отступы между колонками */
}

.content__image {
    width: 100%; /* Изображение на всю ширину колонки */
    height: auto; /* Высота изображения определяется автоматически */
}

Постоянно когда задам вопрос, сразу сам нахожу ответ...

БЛОГ НА HUSL

Галерея изображений на сайте

Ответы (1 шт):