I had an idea for a game that I wanted to make in HTML. I just do not know how to create this layout:

[![This is an approximate layout for my idea.](https://i.stack.imgur.com/XPGgU.png)](https://i.stack.imgur.com/XPGgU.png)

How could I achieve this with HTML, JavaScript, and CSS? (No, I am not a n00b. I just do not know how to create a square with little squares.) Many thanks. P.S. I am a kid. :) Also, sorry about the visual. I threw it together in two minutes.