@VegasChickiChicki

Как возможно реализовать такое с помощью CSS Grid?

Как возможно реализовать такое расположение картинок с помощью CSS Grid?
37.png
  • Вопрос задан
  • 154 просмотра
Решения вопроса 2
alsolovyev
@alsolovyev
В Вашем примере прослеживаются 3 ряда по 3 блока в каждом. Что-то такое:
5c0d22122d2e5075784737.png
Чтобы сделать длинный и высокий блоки надо использовать: grid-column-start, grid-column-end, grid-row-start...
Дальше для каждой фотографии создаем контейнер(последующие манипуляции будут только с ними).
И мы имеем три пути:
  1. Мы обрезаем фото под нужные размеры с помощью clip-path(я бы использовал clip потому, что поддержка с IE4)
  2. Изменяем размер контейнеров на нужные нам через transform
  3. Изменяем размер контейнеров на нужные нам через position: absolute и width height
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Чисто сеткой на гридах, без позиционирования и процентов
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы