как сделать галерею используя сетку дисплея - PullRequest
Новая
       1

как сделать галерею используя сетку дисплея

0 голосов
/ 26 октября 2019

Я хотел бы знать, может ли кто-нибудь помочь мне создать галерею с использованием сетки отображения.

Например:

  • Если у меня есть 1 изображение, оно должно заполнить все доступное пространство.

В каждой строке должно быть не более 3 изображений.

  • Если у меня 3 изображения: первое заполняет 100%а остальные два идут к нижней строке и получают 50% каждый.

  • , если у вас есть 4 изображения: первое заполняет 100%, а остальные 3 переходят к нижней строке и получают+ - 33% каждый.

  • Если у меня есть 5 img: первый занимает 100%, а остальные 3 идут в нижнюю строку и получают + - 33% каждый и пятый img идетдо следующей строки заполнение 100% и т. д.

пример 1

пример 2

пример 3

Для этого я использую php - pug 

mixin galery-images(array)
 .galery-images
    each el, index in array  
      if index == 0 
        .col.first-img
          img(src=el.img, alt=el.title)

css 

& img {
    display: block;
  }

  & :nth-child(1n) {
    width: 360px;
    height: 190px;

    margin: 20px 16px 5px 16px;

    grid-row: 1;
  }

  & :nth-child(2n) {
    grid-row: 1;

    margin: 5px auto;
  }

  & :nth-child(3n) {
    grid-row: 1;

    margin: 5px auto;
  }

  & :nth-child(4n) {
    grid-row: 1;

    margin: 5px auto;
  }

Большое спасибо за вашу помощьребята.

...