0

I have the following snippet:

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
}
<ul>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 3</li>
  <li>Test 4</li>
  <li>Test 5</li>
</ul>

Actual result: the elements in the second row of the grid are on the left side of the grid, not on the center axis of the grid.

Expected result: the elements in the second row of the grid should be aligned to the horizontal center axis of the grid.

There are no error messages. I have tried doing a few searches on the Internet and on SO.

I have seen this MDN page and still do not understand why this does not work well. In this page it tells about the inline axis of a grid container. I tried searching about this but I could not find anything relevant for me.

I use Firefox.

Thank you.

silviubogan
  • 3,343
  • 3
  • 31
  • 57
  • That's how CSS-Grid works...you actually want flexbox here. CSS-Grid will place elements *in the grid* depending on the columns you have defined. – Paulie_D Apr 23 '20 at 11:13
  • `justify-content:center` on a CSS-Grid container will center all the elements as a "group", not individual elements in the grid. See the demo on MDN – Paulie_D Apr 23 '20 at 11:20

0 Answers0