reactjs - Having an issue in my css. Change in grid layout after clicking on button - Stack Overflow

So after clicking on the "More" button i am getting my desired design after clicking. But initially there is a unused space on the right side as u can see in the image before clicking on the More button. Why this is happening? The initial page should look absolutely like it is showing after the More button is clicked.

the css:

container {
  padding: 40px 20px;
  
  background-color: #2d2d2d;
  width: 100%;
}

.header {
  margin-bottom:40px;
  text-align: center;
}

.title {
  font-size: 32px;
  color: #ffffff;
  font-weight: 600;
}

.divider {
  height: 1px;
  background: #e0e0e0;
  width: 120px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 100%;
  padding: 0 20px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 40px;
}

.coinCard {
  text-decoration: none;
  color: inherit;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #3b3b3b;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  height: 100px;
  
  

}

.coinCard:hover {
  transform: translateY(-3px);
}

.coinContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 10px 0;
  
  justify-content: space-between;
  text-align: center;
}

.coinImage {
  width: 40px;
  height: 40px;
  margin: 0;
  margin-bottom: 4px;
  margin-top: -18px;
}

.coinName {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
 
}

.coinPrice {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #ffffff;
}


.changePercentage {
  font-size: 14px;
  font-weight: 500;
}

.buttonContainer {
  text-align: center;
  margin-top: 40px;
}

.loadButton {
  padding: 12px 40px;
  font-size: 15px;
  background: transparent;
  color: #00E676;
  border: 2px solid #00E676;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
}

.loadButton:hover {
  background: #00E676;
  color: #2d2d2d;
  border: 2px solid #00E676
}

U can also have a look on the tsx.

import { useEffect, useState } from "react";
import { fetchCoins } from "../services/api";
import { Coin } from "../types/coin";
import { Link } from "react-router-dom"; 
import styles from "./CoinList.module.css";

const CoinList = () => {
  const [coins, setCoins] = useState<Coin[]>([]);
  const [showAll, setShowAll] = useState(false);

  useEffect(() => {
    fetchCoins().then(setCoins);
  }, []);

  const displayedCoins = showAll ? coins : coins.slice(0, 20);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h2 className={styles.title}>Top 20 Coins</h2>
        
      </div>

      <div className={styles.grid}>
        {displayedCoins.map((coin) => (
          <Link
            key={coin.uuid}
            to={`/coin/${coin.uuid}`}
            className={styles.coinCard}
          >
            <div className={styles.coinContent}>
              <img
                src={coin.iconUrl}
                alt={coin.name}
                className={styles.coinImage}
              />
              <h3 className={styles.coinName}>{coin.name}</h3>
              <div className={styles.coinPrice}>
                ${parseFloat(coin.price).toFixed(2)}
              </div>
              <div
                className={styles.changePercentage}
                style={{ color: coin.change?.startsWith("-") ? "#e15241" : "#4eaf0a" }}
              >
                {coin.change}%
              </div>
            </div>
          </Link>
        ))}
      </div>

      {!showAll && (
        <div className={styles.buttonContainer}>
          <button
            onClick={() => setShowAll(true)}
            className={styles.loadButton}
          >
            More
          </button>
        </div>
      )}
    </div>
  );
};

export default CoinList;