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;
}