How center grid element by using grid?-CodePudding

I want make cards like this: https://i.stack.imgur.com/OjNIZ.jpg but I doesn't idea how to center cards.

Results: Results of my code

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 29px;
  place-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.cards-container_card {
  display: grid;
  margin-top: 2em;
  text-align: center;
  border-radius: .25rem;
  width: 18rem;
}

<div > - parent
  <article > - child
    <img src="https://via.placeholder.com/80" alt="Hot air balloons">
    <div >
      <h5>A short heading</h5>
    </div>
  </article>
</div>

CodePudding user response：

Based on what you mean by centering the cards. You can use the 'grid-column' property to adjust the position of the cards accordingly

CodePudding user response：

See this codepen and hope it helps : https://codepen.io/so8800/pen/bGoQmOP

HTML :

 <div id="center">
  <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
  </div>
</div>

CSS:

#center {
display: grid; 
place-items: center;
}

.grid {
display : grid;
grid-template-columns : repeat(5, 180px);
grid-gap : 12px;   
}

.box {
aspect-ratio:1;
background-color:red;
}