是否可以调整网格中一行中每个单独项目的高度

Question

我正试图通过使用大小不同的图像和彩色div来制作一个不均匀和交错的图库。我将列设置为最小352px，并自动适应屏幕。因此，带有网格的容器看起来像这样：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;

我遇到的问题是，最高的图片设置了行的高度，而具有较小图像的div遵循相同的高度。有没有办法告诉行中的项目不要都是相同的大小？或者只针对每行中的某些项目，并告诉它们特定的高度？

.grey {
background: #D9D9D9;
}

.tan {
background: #DCCEC8;
}
.light-brown {
background: #DC997D;
}
.brown {
background: #814A3D;
}
.black {
background: #000;
}
.grid { 
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid > div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
position: absolute;
z-index: 9;
}
h4:nth-child(2) {
bottom: 35px;
}
h4:nth-child(3) {
font-size: 18px;
margin: 5px 0;
bottom: 5px;
} 
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}

<div class='grid'>
<div>
<img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
<h4>Person One</h4>
<h4>@person1</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person TWO</h4>
<h4>@person2</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
<h4>Person 3</h4>
<h4>@person3</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
<h4>Person four</h4>
<h4>@person4</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
<h4>Person Five</h4>
<h4>@pesron5</h4>
<div class="overlay"></div>
</div>
<div><div class="light-brown fill"></div></div>
<div><div class='brown fill'></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<h4>Person Six</h4>
<h4>@person6</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
<h4>Person Seven</h4>
<h4>@person7</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<h4>Person Eight</h4>
<h4>@person8</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<h4>Person Nine</h4>
<h4>@Person9</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person Ten</h4>
<h4>@person10</h4>
<div class="overlay"></div>
</div>
</div>

Answer 1

在网格项上使用height。此外，标题应该被包装在一个容器中，并且它们的默认边距应该被覆盖，这样标题就可以放在图像高度<150像素。

.grey {
background: #d9d9d9;
}
.tan {
background: #dccec8;
}
.light-brown {
background: #dc997d;
}
.brown {
background: #814a3d;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid>div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: fit-content;
background: rgba(0, 0, 0, 0.05);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
z-index: 9;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
.grid-item {
height: fit-content;
height: -moz-fit-content;
}

<div class="grid">
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
<div class="overlay">
<h4>Person One</h4>
<h4>@person1</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
<div class="overlay">
<h4>Person TWO</h4>
<h4>@person2</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
<div class="overlay">
<h4>Person 3</h4>
<h4>@person3</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
<div class="overlay">
<h4>Person four</h4>
<h4>@person4</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
<div class="overlay">
<h4>Person Five</h4>
<h4>@pesron5</h4>
</div>
</div>
<div>
<div class="light-brown fill"></div>
</div>
<div>
<div class="brown fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<div class="overlay">
<h4>Person Six</h4>
<h4>@person6</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
<div class="overlay">
<h4>Person Seven</h4>
<h4>@person7</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<div class="overlay">
<h4>Person Eight</h4>
<h4>@person8</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<div class="overlay">
<h4>Person Nine</h4>
<h4>@Person9</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<div class="overlay">
<h4>Person Ten</h4>
<h4>@person10</h4>
</div>
</div>
</div>