Let’s build a CSS grid system from scratch

The animated CSS clocks showed us that we can use calc() and CSS for pretty complicated animations and calculations and we have learned a lot from these examples, however, the real-world use of an analog clock may be questionable. You definitely don’t want to add a clock like this to your website!

Grid systems on the other hand are very commonly used for website designs and building our own would be quite useful. Let’s see what our grid will look like when it’s finished:

This gives us a 6-column grid which we can later use to define the width of elements like our navigation will be 3-column-wide on desktop viewport sizes and 6 on mobile, and maybe the footer will be 6 columns throughout.

With this grid system in place, we will build a simple layout like this:

In this grid system we will start off with 6 columns, but you will be able to change that with a setting. Our columns will fluidly resize with the container on a percentage basis, but the gutters (the space between the columns) will be fixed to a certain pixel value.