how can i position a button inside a grid div-CodePudding

<div className={classes.productSection}>
      {available.map((product)=>
        (<div key={product.id} className={product.availability? classes.productBox : classes.notavailBox}>
          <h4>{product.user.companyName}</h4>
          <p>{product.user.district}</p>
          {product.availability && <button className={classes.cartButton}>Add</button> }
        </div>
        )
      )}
    </div>

this is the styling

.productSection {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 20% 20% 20%;
  justify-content: center;
  animation: append-animate .5s linear;
  margin-bottom: 1rem;
  
}
.productBox {
  white-space: nowrap;
  border: 1.5px solid gray;
  padding: 10px;
  overflow: hidden;
  border-radius: 12px;
}

the problem is I couldn't position the button. when using absolute positioning, it is positioned depend on the body not the parent element. I need a button in the right side of the parent div and vertically centered.

CodePudding user response：

For the button be to positioned absolute depending on the parent you need to add this property to the parent:

position: relative;

CodePudding user response：

A cool feature about CSS Grid is that you can use you can use properties like:

justify-self: start; (usually horizontal left)
justify-self: center; (usually horizontal center)
justify-self: end; (usually horizontal right) and
align-self: start; (usually vertical top)
align-self: center; (usually vertical center)
align-self: end; (usually vertical bottom)

You apply the properties on the child element of a parent element that has display: grid. to move the selected child, Try them out. hope this helps.