Задать вопрос
@sasha_jarvi
html

Как сверстать галерею с разными размерами картинок?

Имеется следующая галерея:
dcdda82718.jpg

Как сверстать такую галерею при помощи CSS Grid либо иных инструментов, если картинки имеют одинаковую ширину, но разную высоту?
  • Вопрос задан
  • 6381 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 6
Chefranov
@Chefranov
Новичок
Masonry
Ответ написан
Комментировать
Комментировать
Casufi
@Casufi
Зависит от, вам подходит чтобы картинки располагались сверху вниз и слева направо, то можете воспользоваться флексбоксом
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
ну или https://masonry.desandro.com/
Ответ написан
Комментировать
Комментировать
Eridani
@Eridani
Мимо проходил
Как сделать нестандартную сетку на гридах?
Ответ написан
Комментировать
Комментировать
mr_jok
@mr_jok
Masonry и Isotope
Ответ написан
Комментировать
Комментировать
LenovoId
@LenovoId
svg, css,js
https://codepen.io/topicstarter/pen/PMQYwE самый простой способ, только ширина одинаковая должна быть
Ответ написан
Комментировать
Комментировать
@sasha_jarvi Автор вопроса
Можно воспользоваться .card-columns на Bootstrap
https://getbootstrap.com/docs/4.0/components/card/
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Frontend Developer (React + Node.js)
Alfabet Service
от 1 000 до 2 000 $
Ещё вакансии