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: