Equivalent of display:flex and justify-content: center in GRID

Question

I have a div with n (can be different number) children. I want to display them in one row and center horizontally.

In flex, I would do:

display: flex;
justify-content: center;

How is it possible to do it with grid, without flex?

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: grid;
  gap: 20px;
}

<div class="b">
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
</div>

Perhaps you are looking for this? https://stackoverflow.com/questions/66385170/css-grid-keep-all-children-on-one-row-and-equally-spaced — Kostas Minaidis, Mar 22 '23 at 19:42
Not possible with Grid Level 1. See the duplicates for explanations. — Michael Benjamin, Mar 22 '23 at 19:56

Kostas Minaidis · Answer 1 · 2023-03-22T22:07:53.653

Here are all the elements in one row, centered:

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: 1fr;
  grid-auto-flow:column;
}

<div class="b">
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
  <div class="a">x</div>
</div>

Update: you can use a 'container' element to center the grid.

.a {
  height: 20px;
  width: 20px;
  background: blue;
  border: 1px solid red;
}

.b {
  display: inline-grid;
  justify-items: center;
  gap: 20px;
  grid-auto-columns: max-content;
  grid-auto-flow:column;
}
.c {
  text-align: center;
}

<div class="c">
  <div class="b">
    <div class="a">x</div>
    <div class="a">x</div>
    <div class="a">x</div>
    <div class="a">x</div>
  </div>
</div>

@underfrankenwood in that case, I think a container element will work out well. Check the updated code. — Kostas Minaidis, Mar 22 '23 at 22:08

Equivalent of display:flex and justify-content: center in GRID

1 Answers1