Я пытаюсь построить относительно простую сетку. У меня есть 9 изображений, которые я хочу расположить в формате 3 x 3. Вот код: https://codepen.io/chris-c-thomas/pen/xxwWGRN
К сожалению, я получаю лишние пробелы в промежутках между строками, так как я думаю, что это растягивает некоторые изображения. Как мне go исправить это?
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="photos-grid">
<img class="photo photo-1" src="https://via.placeholder.com/300x450.png" alt="">
<img class="photo photo-2" src="https://via.placeholder.com/300x150.png" alt="">
<img class="photo photo-3" src="https://via.placeholder.com/300x300.png" alt="">
<img class="photo photo-4" src="https://via.placeholder.com/300x150.png" alt="">
<img class="photo photo-5" src="https://via.placeholder.com/300x300.png" alt="">
<img class="photo photo-6" src="https://via.placeholder.com/300x450.png" alt="">
<img class="photo photo-7" src="https://via.placeholder.com/300x300.png" alt="">
<img class="photo photo-8" src="https://via.placeholder.com/300x450.png" alt="">
<img class="photo photo-9" src="https://via.placeholder.com/300x150.png" alt="">
</div>
</div>
</body>
</html>
S CSS
.container {
width: 100%;
}
.photos-grid {
display: grid;
width: 940px;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
.photo {
}
.photo-1 {
grid-column: 1 / span 1;
grid-row: 1 / span 3;
}
.photo-2 {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.photo-3 {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
}
.photo-4 {
grid-column: 1 / span 1;
grid-row: 4 / span 1;
}
.photo-5 {
grid-column: 2 / span 1;
grid-row: 2 / span 2;
}
.photo-6 {
grid-column: 3 / span 1;
grid-row: 3 / span 3;
}
.photo-7 {
grid-column: 1 / span 1;
grid-row: 5 / span 2;
}
.photo-8 {
grid-column: 2 / span 1;
grid-row: 4 / span 3;
}
.photo-9 {
grid-column: 3 / span 1;
grid-row: 6 / span 1;
}