如何以空间调整的方式制作 css 网格？

Question

这是div

<div className={classes.productSection}>
        {data.map((product) =>
        (<Link key={product.id} className={classes.productLink} to={`${product.id}`}>
          <div key={product.id} className={classes.productBox}>
            <h4>{product.name}</h4>
          </div>
        </Link>)
        )}
      </div>

和当前的CSS

.productSection {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 20% 20% 20%;
    justify-content: center;
    animation: append-animate .5s linear;
    margin-bottom: 1rem;
  }
  
  .productLink{
    text-decoration: none;
    color: black;
  }
  
  .productBox {
   
    border: 1.5px solid gray;
    padding: 10px;
    overflow: clip;
 
    border-radius: 12px;
  }
  
  .productBox p {
    margin: 0;
    padding: 1px;
    font-size: 0.8rem;
  }
  
  .productBox h4 {
    margin: 0;
    padding: 2px;
    font-weight: 600;
  }

网格没有调整空间，最小的网格在直线上，占据的空间量与最大的网格完全相同。但我需要的是空间调整的网格布局。请帮忙？

第一个格子是现在的样式，第二个格子应该变成什么样子