somik

Не могу сверстать галерею адаптивно

Рекомендованные сообщения

Мб кто-то ради личного опыта сверстает мне галерею как на картинке: https://cloud.mail.ru/public/1idM/BUuGZ8T72

Картинки порезаные: https://cloud.mail.ru/public/MhYY/7pnLJiLUC

Требуется на флексах и адаптивно.

Я так и не смог это сделать.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Так гриды вроде не полностью сейчас поддерживаются??

Поэтому пока на флексах рекомендуют шпарить.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Флексы, к сожалению, не умеют объединять элементы из разных строк:(. Так что тут или делать на гридах с фолбэком, например, на флоаты (возможно, даже пожертвовав симметрией и центральным положением высокой картинки в старых браузерах), или сразу сдаться и подключить скрипт типа Masonry/Isotope. Можно, конечно, выкрутиться, нагородив кучу вложенных контейнеров, но поддерживать такое, если потребуется поменять порядок отображения картинок, будет ох как невесело.

Кстати, в чем здесь должна состоять адаптивность? Картинки должны перестраиваться в меньшее кол-во колонок при сужении окна?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

А вообще надо дизайнерам руки отрывать за такое :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Дизайнеры не виноваты. Но да, на флексах придется именно извращаться, и результат получится очень негибким. О такой адаптивности «из коробки», как в примере mrnobody выше, придется забыть:(

Как вариант, можно попробовать скриптом проверить, применилось ли к контейнеру какое-либо из гридовых свойств (через window.getComputedStyle), и если да, то ничего не делать (всё сделают гридовые стили), а если нет — динамически добавить на страницу скрипт Masonry...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)
    • Автор: WebNewbe
      Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции.

       Мое портфолио:
      https://alex2033.github.io/sites/BlackDone/index.html
      https://alex2033.github.io/sites/Sandeo/index.html
      https://alex2033.github.io/sites/Barbershop/index.html
      https://alex2033.github.io/sites/Skylith/index.html
      https://alex2033.github.io/sites/Unicorn/index.html
      https://alex2033.github.io/sites/Bouncy/index.html
      Остальные работы вы можете посмотреть здесь:
      https://alex2033.github.io/
      Навыки:
      - Знание HTML5, CSS3
      - Опыт адаптивной, семантической, кроссбраузерной верстки
      - CSS3 анимация
      - знания Javascript на уровне jQuery
      - Использование препроцессоров LESS/SASS/Stylus + Pug
      - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode
      - Именование классов по методологии БЭМ-нейминг
      - Gulp, npm, bower
      - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid)
      - Умение работать с фреймворками bootstrap 3, 4, foundation
      - Знание английского на уровне чтения документации
      - Навык работы с векторной графикой SVG
      - Умение использовать flexbox, css-grid там где это необходимо
      Форма связи:
      Email - XoxlofAlexandr@yandex.ru - преимущественно
      Skype - Xronaliz
      Также можете написать на этом сайте
      Благодарю за внимание и хорошего дня:)

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы