1 
  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.

Improve this question
1
  • could you add the html as well Commented Jul 9, 2020 at 22:21

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How would you do this with styled elements?
@pomegrenade if you share your code (complete html and css) I can help you.