Create your own responsive CSS grid system from scratch

Create your own custom responsive CSS grid system

Since I decided to learn web designing and choosing it for my career option, I’ve learned and experienced many things in these years. As the new tools and frameworks are developed to help the designers, I personally feel that the designers are getting lazy in the matter of creating some basic things from the scratch (no offence please!). For example, everyone knows about the Twitter Bootstrap, it is widely used and accepted by the web designers and developers. But what I feel is every website that powered by Bootstrap looks very similar, because the designers or developers does less customization to the predefined styles of Bootstrap, even though they can do it. I’m not sure they were lazy or running out of time at that moment, but why look so similar if you can make it different? Moreover, most of us use Bootstrap for the purpose of responsiveness of a website, so let’s make a change and start to code our own responsive CSS grid system from scratch.

First, decide how many columns you need in your grid system, what will be the maximum page width of your container and what should be the gutter width. Well confused? Don’t be, there is a simple solution to your confusion, go to the Gridulator (gridulator.com), a simple online gird calculator, where you’ve to put the maximum page width in Overall Width (I’m going to put 1000 for this tutorial) and enter the column numbers in # of Columns (I’ll put 12 for this tutorial, because we’re going to make a 12 columns grid system). Right after entering the proper values in overall width and number of columns, Gridulator will suggest you few measurements for your gird system, you can pick any of the row values from the suggestion table. We’ll pick the second row values, which is 65px for column width and 20px for gutter width. Look at the image bellow –

Grid System

What you seeing on the above picture are just a simple math, here the math is:

65 X 12 = 780px (total column width)

And

20 X 11 = 220px (total gutter width)

So the overall width will be:

Total Column Width + Total Gutter Width = Overall Width

780px + 220px = 1000px

Is that what we put the Overall Value on Gridulator? Absolutely right.

So let’s proceed to our next level. We’ll create a CSS file and put the values into our grid columns. First we’ve to think about our column’s name, let’s name our columns as “col”. So the names of our 12 columns will be: col-1, col-2, col-3, col-4, col-5, col-6, col-7, col-8, col-9, col-10, col-11 and the last but not the least, col-12.

After putting the values in our columns, here are our CSS codes along with the calculation about how you’ll gain the value:

Now we’ll add some more codes in our CSS to make sure that all the 12 columns sits next to another within a row.

We’ve added a float, and gave 20px of right and bottom margin to our columns. The 20px right margin is our gutter width, which I mentioned earlier.

So in the next level, we’ll create two more final classes to our CSS, one will be ours .container and another will be .margin-adjust. The .container class will contain the overall width of our grid system, which is 1000px and the .margin-adjust will adjust the right margin of our last column within a row.

Comments

Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...