如何使网格内图像取可用高度

Question

我尝试在我的页面中安排网格。每个网格项目由图像和图像下方的文本组成。网格项本身是柔性的(flex-direction: column)。我希望图像取可用高度，文本取最小高度。

.main {
width: 60%;
margin: 10px auto 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 120px);
grid-gap: 16px;
}
.main__item {
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid transparent;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 2px 2px 4px #a0a0a0;
}
.main__item:hover {
border-color: #000;
}
.main__item--1 {
grid-column: 1/span 1;
grid-row: 1/span 1;
}
.main__item--2 {
grid-column: 2/span 1;
grid-row: 1/span 1;
}
.main__item--3 {
grid-column: 3/span 1;
grid-row: 1/span 3;
}
.main__item--4 {
grid-column: 1/span 2;
grid-row: 2/span 2;
}
.main__item--5 {
grid-column: 1/span 2;
grid-row: 4/span 2;
}
.main__item--6 {
grid-column: 3/span 1;
grid-row: 4/span 2;
}
.main .categoryImage {
width: 100%;
object-fit: cover;
}
.main .categoryText {
width: 100%;
padding: 5px;
color: #000;
background-color: #FFF;
text-align: center;
font-size: 2rem;
text-decoration: none;
}

<main class="main">
<div class="main__item main__item--1">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOMGUmxNPK-k7H6O9rScZDBulnrROW5zf_vA&usqp=CAU"
alt="item">
<a class="categoryText" href="/">Jeans</a>
</div>
<div class="main__item main__item--2">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYRs43ip3txPtxH2gVOlvnmrI--WPqkh8QHg&usqp=CAU"
alt="item">
<a class="categoryText" href="/">T-Shirts</a>
</div>
<div class="main__item main__item--3">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScoxDRfLwKyD5ThC8mRC76lByyjWhQKUu4VQ&usqp=CAU"
alt="item">
<a class="categoryText" href="/">Hats</a>
</div>
<div class="main__item main__item--4">
<img class="categoryImage"
src="https://tbsnews.net/sites/default/files/styles/big_2/public/images/2020/04/11/gentleman-man-accessories-sunglasses-wallpaper-preview.jpg?itok=xbyIOxlm&timestamp=1586590381"
alt="item">
<a class="categoryText" href="/">Accessories</a>
</div>
<div class="main__item main__item--5">
<img class="categoryImage"
src="https://asset20.ckassets.com/blog/wp-content/uploads/sites/5/2019/12/Jackets-on-Club-factory.jpg"
alt="item">
<a class="categoryText" href="/">Jackets</a>
</div>
<div class="main__item main__item--6">
<img class="categoryImage"
src="https://preview.redd.it/9ofx5enj3cw41.jpg?auto=webp&s=8a7996fd197a475a24d98405e09ea9bfa1928d47"
alt="item">
<a class="categoryText" href="/">Shorts</a>
</div>
</main>

所以基本上我想要文本在最底部，图像占用可用空间。我该怎么做呢?

Answer 1

添加到CSS:

.main__item img {
flex: 1;
}

Answer 2

您可以将flex-grow: 1添加到您的.categoryImage:

.main .categoryImage {
width: 100%;
object-fit: cover;
flex-grow: 1;
}

该属性指定flex容器中剩余空间的多少应该分配给项(flex生长因子)。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow描述我还从您的示例中删除了grid-template-columns: repeat(3, 1fr);，因为这会导致内容在较大的屏幕尺寸上超出其容器(.main__item)。

完整的示例:

.main {
width: 60%;
margin: 10px auto 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 16px;
}
.main__item {
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid transparent;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 2px 2px 4px #a0a0a0;
}
.main__item:hover {
border-color: #000;
}
.main__item--1 {
grid-column: 1/span 1;
grid-row: 1/span 1;
}
.main__item--2 {
grid-column: 2/span 1;
grid-row: 1/span 1;
}
.main__item--3 {
grid-column: 3/span 1;
grid-row: 1/span 3;
}
.main__item--4 {
grid-column: 1/span 2;
grid-row: 2/span 2;
}
.main__item--5 {
grid-column: 1/span 2;
grid-row: 4/span 2;
}
.main__item--6 {
grid-column: 3/span 1;
grid-row: 4/span 2;
}
.main .categoryImage {
width: 100%;
object-fit: cover;
flex-grow: 1;
}
.main .categoryText {
width: 100%;
padding: 5px;
color: #000;
background-color: #FFF;
text-align: center;
font-size: 2rem;
text-decoration: none;
}

<main class="main">
<div class="main__item main__item--1">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTOMGUmxNPK-k7H6O9rScZDBulnrROW5zf_vA&usqp=CAU"
alt="item">
<a class="categoryText" href="/">Jeans</a>
</div>
<div class="main__item main__item--2">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSYRs43ip3txPtxH2gVOlvnmrI--WPqkh8QHg&usqp=CAU"
alt="item">
<a class="categoryText" href="/">T-Shirts</a>
</div>
<div class="main__item main__item--3">
<img class="categoryImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScoxDRfLwKyD5ThC8mRC76lByyjWhQKUu4VQ&usqp=CAU"
alt="item">
<a class="categoryText" href="/">Hats</a>
</div>
<div class="main__item main__item--4">
<img class="categoryImage"
src="https://tbsnews.net/sites/default/files/styles/big_2/public/images/2020/04/11/gentleman-man-accessories-sunglasses-wallpaper-preview.jpg?itok=xbyIOxlm&timestamp=1586590381"
alt="item">
<a class="categoryText" href="/">Accessories</a>
</div>
<div class="main__item main__item--5">
<img class="categoryImage"
src="https://asset20.ckassets.com/blog/wp-content/uploads/sites/5/2019/12/Jackets-on-Club-factory.jpg"
alt="item">
<a class="categoryText" href="/">Jackets</a>
</div>
<div class="main__item main__item--6">
<img class="categoryImage"
src="https://preview.redd.it/9ofx5enj3cw41.jpg?auto=webp&s=8a7996fd197a475a24d98405e09ea9bfa1928d47"
alt="item">
<a class="categoryText" href="/">Shorts</a>
</div>
</main>