How to easily & manually make an HTML and CSS 4x4 Grid

The Goal

First things first, what is the goal?

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.

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.

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.

Tips and Solving Common Problems

If you're having trouble positioning look into the position and flex options.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store