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.

You can download the template and example project from my Github:

GitHub - webondevices/html-css-wizardry: Source for the html-css-wizardry book

Adding the containers

Our HTML markup accommodating the grid system consists of 6 divs:

<main>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</main>

Let’s start building all this with our container and the padding surrounding these items. This is the padding inside the body of the document and the padding inside the content element with the white background and rounded corners: