CSS is completely ignored-CodePudding

I can't figure out why my css is completely ignored. The images are full size and the images from the bottom row end up on top of the top row. I want them to be the same size and next to each other on each row and the other rows not end up on top of the other rows.

    return(
products.map((product) =>(
  <div className="product">
    <button>

  <div className="product_body">
    <img src={product.image_url}></img>
    <h2 className="product_title">{product.name}</h2>
    <p>{product.price}</p>
    <p>{product.added}</p>
  </div>
  </button>
</div>
)))

CSS:

.App {

text-align: center;
}
.containerWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.product {
  max-width: 35px;
  height: 25px;
}

CodePudding user response：

    .product {
      max-width: 35px;
      height: 25px;
    }
    .product .product_body {
      max-width: 35px;
      height: auto;
      display: flex;
      flex-direction: column;
    }