Cannot horizontally center elements in CSS Grid

Question

I have a CSS Grid like this, and I want to be able to center the child elements horizontally. For example, in this pic, I want to see "Queen" come in the center and not at the left side.

Trying with align-items: center and justify-content: center does not work. What do I do?

This is my CSS (scss) for the grid (parent):

display: grid;
gap: 1rem 0;
grid-template-columns: 1fr;

--node-min-width: 235px;

@media (min-width: 576px){
   grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr));
}

I don't think you can achieve that with grid. – connexo Feb 09 '22 at 07:58 — connexo, Feb 09 '22 at 07:58

jeremy-denis · Answer 1 · 2022-02-09T07:48:04.863

with a flex container you can play with flex property on item to manipulate their size

here is the minimal code to have a similar situation working

.element {
  background:darkgrey;
  color:white;
  text-align:center;
  margin-top: 12px;
  flex:0 0 25%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

<div class="grid">
  <div class="element">rook</div>
  <div class="element">bishop</div>
  <div class="element">knight</div>
  <div class="element">king</div>
  <div class="element">queen</div>
</div>

Cannot horizontally center elements in CSS Grid

1 Answers1