How center grid element by using grid?

Question

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 class="cards-container"> - parent
  <article class="cards-container_card"> - child
    <img src="https://via.placeholder.com/80" alt="Hot air balloons">
    <div class="content">
      <h5>A short heading</h5>
    </div>
  </article>
</div>

What is your expected output with the four cards in the UI you have? When you say you want them "centered," do you mean vertically, horizontally, or both? — Alexander Nied, Jan 12 '22 at 19:04
Please revise to improve the snippet demo. It should contain more than one card. — isherwood, Jan 12 '22 at 19:04
You should be able to add `margin: auto;` to the `..cards-container` to center it. — Andy Hoffman, Jan 12 '22 at 19:06
remove `align-content` and `justify-content`, and put `place-items:center` in all 2 selectors — Laaouatni Anas, Jan 12 '22 at 19:09
I'm want to center by vertically and horizontally. And `margin: auto`, `align-content` `justify-content` and `place-items:center` doesn't work — m4r5ha11, Jan 12 '22 at 19:10

score 1 · Answer 1 · answered Jan 12 '22 at 19:46

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

HTML :

 <div id="center">
  <div class="grid">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></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;
}

score -1 · Answer 2 · answered Jan 12 '22 at 19:20

-1

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

answered Jan 12 '22 at 19:20

Chinaza Ugwuoke

1
2

How center grid element by using grid?

2 Answers2