Как выровнять фото в CSS сетке - PullRequest
Новая
       15

Как выровнять фото в CSS сетке

0 голосов
/ 30 января 2019

Я должен создать галерею, у меня есть различное количество фотографий, и я хотел бы всегда корректировать фотографии.Как я могу сделать это с помощью сетки CSS?

На экране я показываю вам мой пример - у меня есть 4 фотографии, которые я хотел бы иметь смешанные размеры и в то же время - иметь выравнивание.Проблема в том, что я не могу просто использовать сетку CSS и правильно расположить ее, потому что у меня также есть различное количество фотографий.Так что в одном случае у меня есть 4 фотографии, а в другом, например, 15, и эти фотографии всегда должны быть выровнены.Как я могу это сделать?Может быть, какая-то библиотека?

enter image description here

1 Ответ

0 голосов
/ 30 января 2019

... 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3,100px);
  height: 500px;
  width: 500px;
  grid-gap: 10px;
  grid-template-areas: 
    "a a b"
    "a a b"
    "c d d";
  align-content: space-between;
  justify-content: space-around;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}
<div class="wrapper">
  <div class="item1">Objet 1</div>
  <div class="item2">Objet 2</div>
  <div class="item3">Objet 3</div>
  <div class="item4">Objet 4</div>
</div>
...