Как разместить корректно галерею фоток с помощью grid?

Question

Пытаюсь разместить фотки в галереи таким образом как на скрине, но не могу понять как разместить последний блок, да и вообще как корректно все их разместить. Также вопрос, в данном случае будет корректно использовать margin-top и margin-left?

.gallery {
    display: grid;
    grid-template-columns: 391px 669px 530px 252px repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 20px;
    grid-row-gap: 25px;
}
.photo1 { grid-area: 1 / 1 / 2 / 2; }
.photo2 { grid-area: 1 / 2 / 2 / 3; }
.photo3 { grid-area: 1 / 3 / 2 / 4; }
.photo4 { margin-top: -100px;  grid-area: 2 / 1 / 3 / 2;}
.photo5 { grid-area: 2 / 2 / 3 / 3; }
.photo6 { margin-left: -140px; grid-area: 2 / 3 / 3 / 4; }
.photo7 { margin-left: -260px; grid-area: 2 / 4 / 3 / 5; }
.photo7 img { margin-top: 25px;}

<div class="competitions">
        <p class="competitions-head">Галерея</p>
        <div class="gallery">
            <div class="photo1">
                <img src="img/Rectangle18.png">
            </div>
            <div class="photo2">
                <img src="img/Rectangle19.png">
            </div>
            <div class="photo3">
                <img src="img/Rectangle23.png">
            </div>
            <div class="photo4">
                <img src="img/Rectangle20.png">
            </div>
            <div class="photo5">
                <img src="img/Rectangle21.png">
            </div>
            <div class="photo6">
                <img src="img/Rectangle22.png">
            </div>
            <div class="photo7">
                <img src="img/Rectangle24.png">
                <img src="img/Rectangle25.png">
            </div>
        </div>
    </div>

У меня выходит так - Примечание - ширина всех фоток указана в grid-template-colums, по очереди

Answer 1

Каждое пересечение (наложение) добавляет строку или колонку. У Вас должно получиться 5 колонок и 4 строки. Подкорректируйте размеры согласно макету и расставьте изображения в нужном порядке.

.gallery {
  display: grid;
  grid-template-columns: 391px 530px 117px 254px 254px;
  grid-template-rows: 388px 78px 235px 235px;
  grid-gap: 25px;
}

.gallery > div { box-shadow: inset 0 0 2px #090; }
.photo1 { grid-area: 1 / 1 / 2 / 2; }
.photo2 { grid-area: 1 / 2 / 3 / 4; }
.photo3 { grid-area: 1 / 4 / 3 / 6; }
.photo4 { grid-area: 2 / 1 / 5 / 2; }
.photo5 { grid-area: 3 / 2 / 5 / 3; }
.photo6 { grid-area: 3 / 3 / 5 / 5; }
.photo7 { grid-area: 3 / 5 / 4 / 6; }
.photo8 { grid-area: 4 / 5 / 5 / 6; }

<div class="competitions">
  <p class="competitions-head">Галерея</p>
  <div class="gallery">
    <div class="photo1"><img src="img/Rectangle18.png" alt="Rectangle18"></div>
    <div class="photo2"><img src="img/Rectangle19.png" alt="Rectangle19"></div>
    <div class="photo3"><img src="img/Rectangle23.png" alt="Rectangle23"></div>
    <div class="photo4"><img src="img/Rectangle20.png" alt="Rectangle20"></div>
    <div class="photo5"><img src="img/Rectangle21.png" alt="Rectangle21"></div>
    <div class="photo6"><img src="img/Rectangle22.png" alt="Rectangle22"></div>
    <div class="photo7"><img src="img/Rectangle24.png" alt="Rectangle24"></div>
    <div class="photo8"><img src="img/Rectangle25.png" alt="Rectangle25"></div>
  </div>
</div>

Answer 2

ну как то так... :3

.gallery {
  display: grid;
  grid-template-columns: repeat(47, 1fr);
  grid-auto-flow: dense;
  grid-template-rows: repeat(12, 1fr);
  grid-gap: 7px;
  height: 50vh;
  width: 75vh;/* габариты для сниппета такие. соотношение ~ 2к3, так что растяните как угодно */
}

.photo1 {grid-column: span 12; grid-row: span 12}
/* растягиваем фото1 на 6 колонок и 6 строк, не задавая ей расположение.
если сделать размеры столбцов и строк одинаковыми,
тут будут соотношения сторон фоток помноженные на некий зум */
.photo2 {grid-column: span 18; grid-row: span 14}
.photo3 {grid-column: span 14; grid-row: span 14}
.photo4 {grid-column: span 12; grid-row: span 14}
.photo5 {grid-column: span 14; grid-row: span 12}
.photo7 {grid-column: span 6; grid-row: span 6}
img {
  background: pink;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 3px solid darkblue;
}

<div class="gallery">
  <img class="photo1" src="img/Rectangle18.png">
  <img class="photo2" src="img/Rectangle19.png">
  <img class="photo3" src="img/Rectangle23.png">
  <img class="photo4" src="img/Rectangle20.png">
  <img class="photo5" src="img/Rectangle21.png">
  <img class="photo1" src="img/Rectangle22.png">
  <img class="photo7" src="img/Rectangle24.png">
  <img class="photo7" src="img/Rectangle25.png">
</div>

БЛОГ НА HUSL

Как разместить корректно галерею фоток с помощью grid?

Ответы (2 шт):