Can you help me fit this square into the container?

Hello everyone,

So , I am trying to make a tic tac toe game using HTMK , CSS and JavaScript to test my beginner knowdleges but I have already come onto a problem , as you can see by the picture below :

I am trying to make the basics for the tic tac toe board first making 9 squares , but I cant fit the squares inside the container for some reason. Wonder if you could help me ?? :smiley:

I have no problem with the first 3 squares because they fit the container , but then they keep going down and down instead of going to the other “column”.

Have you covered the Flexbox layout lessons yet?

2 Likes

A grid would also be good for this, as you can force its content to stay in a specific position regardless of the grids size.

2 Likes

No , I haven’t covered any Flexbox lesson. I will check , thanks !

Hey guys , thanks to your help and reading about flexbox I made massive improvement. Take a look ! After a lot of changes and reading and the final “FLEXBOX” touch i finally made the grid.

I am still , however , battling with one other issue wich is this ( If I change the size of my window , the elements stay out of place) :

Perhaps try setting the width and height of you boxes to 1 third of the flexbox?
That way, regardless of the size of their parent they will still attempt to take up the same amount of space.