Today I worked on the UI layout.
I started with using flexbox to center the main game UI, I created a flex-container class with my only flex item being the grid container for the grid. Next, I'm arranged the elements with CSS grid to fit the mockup I created.
I ended up removing some container classes I created when I was using flexboxes because they are not longer applicable. I was having issues setting the flex-container to take up the whole screen and ended up Googling it. I found a good article that helped: https://softauthor.com/css-make-a-div-height-full-screen/.
After messing around with grid and its properties. I was able to set up a 3 by 3 grid. It's more or less coming together.
I think I have it at a good place to start working on the JavaScript and then come back to make it better.
Make it work, Make it right, Make it better
Top comments (0)