使网格布局 div 具有相同的高度

Question

我正在尝试使我的网格布局div具有相同的高度。请参阅下面的我的sass代码，网站布局和html代码的屏幕截图。我希望公共高度是内容最多的网格元素的高度。

我只能提供我的 html 的图片，因为我正在使用 react 和不同的元素。

请告知 SASS 设置。谢谢！

SASS 代码：

// MAIN CONTENT
.grid {
display: grid;
width: 114rem;
grid-gap: 0.5rem;
margin:1rem;

grid-template-columns: repeat(
auto-fit,
minmax(20rem, 1fr)
);
align-items: start;

@include media(small) {
grid-gap: 3rem;
}

&__item {
background: $mainWhite;
border-radius: 0.05rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .05);
transition: $transition;
margin-bottom: 2rem;

&:hover {
transform: translateY(-.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, .1);
}
}
}

.card {
.card__img {
display: block;
width: 100%;
height: 18rem;
object-fit: cover;
object-position: top;
}

.card__content {
padding: 2rem 2rem;
a{
margin-bottom: 1%;
&:hover{
text-decoration: none;
}  
}
.card__tools__header{
font-weight: 400;
margin-bottom: 0.2rem;
font-size: 1.2rem;
color:$mainBlack;
}
.card__tools__box{
display:flex;
flex-wrap: wrap;
flex-direction: row;
box-sizing: border-box;
.card__tools {
font-size: 1.5rem;
white-space: nowrap;
color:$mainGreen;
padding-right:1rem;
overflow: hidden;
box-sizing: border-box;
}
}

.card__header {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-weight: 500;
color: $mainBlack;
margin-bottom: 1rem;
}

.card__text {
font-size: 1.1rem;
letter-spacing: .1rem;
margin-bottom: 1rem;
}

}
.card__btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
text-align: center;
color: $mainBlack;
background-color: $mainWhite;
border: none;
border-radius: 0;
transition: $transition;
cursor: pointer;
margin-top: 5%;

span {
margin-left: 1rem;
}

&:hover,
&:active {
background: $mainGreen;
text-decoration: none;
color:$mainWhite;
span {
margin-left: 1.5rem;
}
}
}
}

Answer 1

您需要在容器上设置带有grid-template-rows的高度，并告诉孩子们填充该高度的100%。否则，他们只会占用所需的空间：

.grid {
//...
grid-template-rows: 1fr;
&__item {
//...
height: 100%;
}
}

我为您创建了一个代码笔来测试这一点。