CODEWITHSUNDEEP
javascripthtmlcss
JusticeDunn
JusticeDunn

Reputation: 115

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

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/

P.S.

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

Upvotes: 0

Views: 66

Answers (2)

Abdul Moeez
Abdul Moeez

Reputation: 1401

Try This!

.row {
    justify-content: center;
}

This will help you out to center the canvas.

Upvotes: 1

JusticeDunn
JusticeDunn

Reputation: 115

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.

Upvotes: 1

Related Questions