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

Question

[VegasChickiChicki]

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

Comments

[Ankhena]

Хоть бы начальную разметку с картинками в песочницу повесили

Answer 1

[Aleksey Solovyev]

В Вашем примере прослеживаются 3 ряда по 3 блока в каждом. Что-то такое:

Чтобы сделать длинный и высокий блоки надо использовать: grid-column-start, grid-column-end, grid-row-start...
Дальше для каждой фотографии создаем контейнер(последующие манипуляции будут только с ними).
И мы имеем три пути:

1. Мы обрезаем фото под нужные размеры с помощью clip-path(я бы использовал clip потому, что поддержка с IE4)
   
2. Изменяем размер контейнеров на нужные нам через transform
   
3. Изменяем размер контейнеров на нужные нам через position: absolute и width height
   

Comments

[VegasChickiChicki]

Здравствуйте , спасибо за ответ! Я ,до создания этого вопроса смог создать сетку ,расположить ее через grid-column-start, grid-column-end, grid-row-start ,но не смог понять как правильно в ней ограничить изображения. Не могли вы подробнее показать как использовать clip-path или transform для данной задачи?

[Aleksey Solovyev]

VegasChickiChicki, а что Вас смущает в clip-path? Так как Вы используете grid(элементы тянутся), то будем использовать % в наших размерах:

clip-path: polygon(0 50%, 80% 50%, 80% 100%, 0 100%);

Вот пример: jsfiddle.net/qgeyouma
Это что касается 1, 3, 4 и 7. 1, 4 надо будет сдвинуть на N пикселей вниз

[Aleksey Solovyev]

Пока ехал. накидал быстренько пример первой строки: jsfiddle.net/z134bynj
Остальные по аналогии делаются.

[VegasChickiChicki]

Aleksey Solovyev, Спасибо ,разобрался , единственный минус в том ,что картинка именно обрезается ,из-за это выглядит немного не так как нужно( Возможно ли ее как-то уменьшить и именно пододвинуть в нужное место?

[VegasChickiChicki]

Все ,я разобрался. Решение такое:
Задал каждому блоку грид сетки position: relative ,а фотографии в нем position: absolute + каждой фотографии задал необходимую ширину и высоту и просто "прижал" их в нужное место через top/bottom/left/right.

[Aleksey Solovyev]

VegasChickiChicki, ну там не просто так указаны значения в процентах. В моем примере отступ(часть которая обрезается) занимает 20%. Следовательно нам нужно будет подвинуть картинку на 10%. Для первого блока что-то такое(по оси Y надо посмотреть):

<span
  class="grid__img grid__img--uno"
  style="background-image: url('some/url.jpg')">
</span>

.grid__img {
  display: block;
  width: 100%;
  height: 100%;
  background-color: darkslateblue;
  /* NEW */
  background-size: cover;
}
.grid__img--uno {
  transform: translateY(20%);
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%);
  /* NEW */
  background-position: 10% 0%; /* наверно так */
}

Поможет избежать добавления лишнего тега с картинкой, но если Ваше решение устраивает Вас, то отлично.

ps используется background-image потому, что можно использовать свойство background-size: cover. Аналог для позиционирования блоков object-fit плохо поддерживается браузерами.

Answer 2

[Ankhena]

Чисто сеткой на гридах, без позиционирования и процентов

Comments

[VegasChickiChicki]

Великолепно! То что искал!
Но хотелось бы немного пояснения по:
grid-template-columns: minmax(0, min-content) 1fr 1fr 1fr minmax(0, min-content);
grid-template-rows: repeat(5, minmax(min-content, max-content));
Не совсем понятно что делают эти строчки )

[Ankhena]

VegasChickiChicki, У меня получилось 5 колонок и 5 строчек по которым должны распределиться блоки.
minmax(0, min-content) это значит, что ширина колонки может быть от нуля до минимально нужной для контента. Это для крайних, а средние равной ширины (может и нет, я не измеряла, но на глаз мне показалось, что если поставить равной, то примерно попаду).

[VegasChickiChicki]

Ankhena, Теперь стало понятнее ) . Т.е. minmax(0, min-content) в строчке grid-template-columns: minmax(0, min-content) 1fr 1fr 1fr minmax(0, min-content); ,считается как отдельная фракция. Либо я что-то не понял ,либо вы ошиблись , но я насчитал 6 строк.