CSS 网格使项目高度相同

Question

起初，网格中的所有项目都是相同的大小，我希望它是

但是单击“加载更多”按钮后，新项目的高度不一样：示例here

我想让这些项目与第一张图片中显示的高度相同，但我不确定如何

我的 html

<div>
    <Title message={"Your Top Artists"}/>
    <div className="topArtists">
        {toDisplay.map(item=>{
            return(
                <div className="items">
                    <li className="items-li" onClick={(e) => handleClick(e, item)}>
                        <Link to={`${path}/artist/${item.id}`}>
                            {item.name}, {item.followers}, {item.genres}, {item.popularity}
                        </Link>
                    </li>
                </div>
            )
        })}
    </div>
    <button onClick={loadMore}> Load More </button>
</div>

还有我的 Css

.topArtists{
    /*width: 100%;*/
    display: grid;
    grid-template-rows: repeat(3, 250px);
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 15px;

}

.items {
    border: 1px solid red;
}

.items-li{
    padding: 10px;
    font-size: 25px;
    list-style: none;
}

Answer 1

目前，您只为前 3 行设置了高度。 改用grid-auto-rows

.topArtists{
    display: grid;
    grid-auto-rows: 250px;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 15px;
}