I was doing a project and quickly needed a 4x4 grid, so I looked it up to see if there is an easy way to do it and I was faced with so much confusing information and decided it would just be easier to manually do it myself. This was by no means a big project and it was not meant for scaling, so in the case that you do need a much larger grid or one that scales up, another method will definitely be required.
The Goal
First things first, what is the goal?
I need a 4 x 4 grid, which is 16. It has to be individual squares that I will interact with and they all need to be the same size arranged into 4 rows and 4 columns, equally spaced.
I will eventually be making this into a game in which the player has to click the one that turns another color and NOT the other ones, so I also need to access them individually through an id.
The setup
I immediately thought of two things, flex and a lot of divs. So that’s what I did. I made a parent div that will contain all the other 16 and just made 16 empty divs with an id for each and a common class.
They looked like this:
<div id=’1' class=’gridbox’></div>
<div id=’2' class=’gridbox’></div>
<div id=’3' class=’gridbox’></div>
The initial setup is pretty straight forward and from here on it's all CSS. The only thing to not forget that comes in handy is to set a class that all will share so they can all be accessed. The individual ids must be unique if you need to target a specific square, like in my case, in which I will be changing the color of the squares and adding listeners.
Another thing that is also important is the parent's class. This can be as simple as an empty div around the 16 divs of the grid, and although it won't be used too much, it makes positioning the entire grid a lot easier and also allows for background or border for the grid since the grid is a bunch of free divs. But the biggest reason for it is so that the grid can be controlled into the arrangement we need and not get moved around by anything else we may add to the site later.
CSS
Parent Div
Before we touch the grid, we will first work on the parent div. For my personal project, I currently made it a square, with a width of 40rem and a height of 40rem. Any size works, but rem is generally recommended as it's pretty consistent.
Assuming you defined size for its parents, you can position it with any method you want. I did:
position: relative;
left: 30%
which sets me up to keep everything where I need it.
Lastly, the most important part of this method is the flex. I used 3 things:
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: flex; is what enables flex to work, you cannot use flex without displaying it. flex-wrap: wrap; makes it so that it wraps around to the next line, which is what really helps us get the rows, and lastly to make sure it separates into rows we use flex-direction: row;.
Keep in mind, depending on the sizing and the different window size and window resolution, if this is not made to be consistent the rows will go out of order. To avoid such problems use the same sizing unit for everything, in my case, I use rem. By keeping the units consistent you will have one of two results: either the size of the parent and the grid will not change when the window is resized, or if you use something like % it will scale the same though this is often tricky to work.
Grid Squares
Finally, we get to the actual grid squares. To make sure the boxes are properly sized and position I temporarily set the background to black, which contrasts the white background. Feel free the use any color you want or a border for the boxes to make sure you know exactly where the grid is.
background-color: black;
Then define the size you want each individual box to be, in my case 9rem by 9rem.
height: 9rem;
width: 9rem;
Remember to keep it the same unit as the parent so the flexbox doesn’t re-arrange itself when the window size changes. Now that you can see your boxes you can also add:
color: white;
or any color that’s NOT the background color. Then in your 1st div write “1” and the 2nd one “2” just to make sure they are ordered correctly. You will see the text in the boxes. The box with “1” should be in the top left corner and the one to its right should contain the “2”. If not the parent was likely set up wrong.
<div id=’1' class=’gridbox’>1</div>
<div id=’2' class=’gridbox’>2</div>
The boxes will likely be in each other, either with no space in between or overlapping. This is fixed with margins which is empty space that pushes away anything near it. In the case that existing margins interfere you can reset that to 0 with:
margin: 0;
and then you can set your own manual ones. Make sure any margins you add are AFTER the margin: 0; as it will change it back if not. margin: 0; resets all 4 sides. In my case, I only wanted a margin on the right, to space the boxes. You might also want a bottom one if your rows are not separated.
margin: 0;
margin-right: 1rem;
Now we should have a perfectly positioned, sized, and organized grid with a small gap separating each box.
Tips and Solving Common Problems
If you're having trouble positioning look into the position and flex options.
If the Boxes are for example in a 6x2 grid instead of a 4x4 or other you can fix that with a few methods. Either make the parent size bigger or smaller to fit in ONLY the way you need, or add margins to the appropriate sides of the box to make sure that it pushes the next box to where it needs to be.
In the case that zooming in or out on the tab changes the grid, for example from a 4x4 to a 6x2, this means that the parent and the boxes are scaling by different amounts, which is a result of inconsistent unit types which I warned against before.
lastly, if you can’t see your grid, it may be off-screen or doesn't have a size, so check the positioning and sizes of everything. Make sure to work on the parent tags before the children. If you cannot position or see the parent div of the grid, check that div’s parent, you probably need to give it a size, which you can use either a static size or 100% for both width and height so that it includes the whole screen.
Conclusion
I believe this is the simplest, easiest, and most clear way to make and modify a simple grid. As with most simple methods, it has its limit and can be upgraded into something larger and more automatic, like writing a loop to make all the divs for you so it can be scaled. Everything was done in Vanilla CSS and HTML and is very few lines compared to others. The problems you may face are generally really easy to diagnose and I believe I warned against most things that could possibly go wrong, from my experience and others, when working with CSS.
