Centering nth element when using grids at the beginning of a row in css
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.
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>
