How can I center a grid of divs (pure JS and CSS)

Question

I'm making a pixel art maker where the user can input their own grid dimensions. I've got the grid to make itself, but I have two issues. First, I can't seem to center my grid. My grid is made up of multiple divs. I've tried:

grid-square {
   margin: auto;
}

But that spaces out all of the grid divs from each other. I can't get anything else to work. Any suggestions?

https://jsfiddle.net/2L3hjfba/2/

PS

Also, if the grid is too big, it makes the divs overlap, so any help with that is also appreciated!

Answer 1

I've found the answer! Each row of the grid technically took up the entire length of the container. So, I simply needed to display the rows as flex and set justify-content to center to center the whole grid.

Answer 2

Try This!

.row {
    justify-content: center;
}

This will help you out to center the canvas.