Centering nth element when using grids at the beginning of a row in css

Question

  margin: 20px 20px 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  justify-items: center;

When using grid, how do you make sure that the fourth item is in the center instead of the left side?

Example:

I want this:

[ ] [ ] [ ]

    [ ]

instead of:

[ ] [ ] [ ]

[ ]

[ ] represents a div element like a Card.

Answer 1

You can make with set grid-column: span 3; for 4th child.

.container {
  margin: 50px 40px 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 40px;
  justify-items: center;
  justify-content: center;
}

.container div {
  background: red;
  height: 100px;
  width: 100px;
}

.container div:nth-child(4) {
  grid-column: span 3;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>