【发布时间】：2023-03-28 03:30:02
【问题描述】：
我正在尝试构建一个相对简单的网格。我有 9 张图像，我想以 3 x 3 的方式定位。这是代码笔：https://codepen.io/chris-c-thomas/pen/xxwWGRN
不幸的是，我在行间隙中获得了额外的间隙空间，因为我认为它正在拉伸一些图像。我该如何解决这个问题？
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>
SCSS
.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;
}
【问题讨论】：
-
align-self和justify-self的初始值为stretch，因此项目将延伸到整个网格区域。此规则的例外情况是项目具有固有纵横比，例如图像。在这种情况下，项目将在两个维度上与start对齐，以使图像不失真。 ref 因此，要消除容器align-items:stretch;上的间隙jsfiddle.net/tzmwsxf1 -
我不希望图像被拉伸以适合完美的 3x3。我希望它像我在我的例子中那样交错。如您所见，只是有一点额外的填充。
-
看看第一张图和旁边的两张图，第一张的高度是
450px，另外两张分别是150px和300px。这两个图像的高度加起来应该等于第一个，并且完美契合，没有任何间隙，但是您添加了grid-gap: 20px;，它将添加到右侧两个图像的总高度。因此，如果第一张图片有20px更多，这将不是问题。你不能把这个留给浏览器来决定，你必须是决定的人，要么拉伸图像，要么找到一个更适合你喜欢的解决方案。 -
@ZohirSalak 的最后一条评论解释了差距的原因，第一条评论提供了问题的解决方案。另一种方法是将图像包装在 div 中，使这些 div 成为网格项目。然后将
display: flex添加到项目中，使图像占据网格单元格的整个高度。它与 Zohir 的方法没有太大区别，但也不完全清楚您想要什么。 codepen.io/mbb7774/pen/LYpdpzL?editors=1100