Create your own responsive CSS grid system from scratch

Create your own custom responsive CSS grid system

This is our container:

And this is our margin adjust:

That’s awesome. We’ve successfully created our grid system, but wait, this isn’t yet neither responsive nor a fluid layout because all of our column and margin values are in pixels. Before we make them responsive, we must have to make them fluid first. If you’re confused about what is the difference between fluid and responsive layout, you can read my Difference between Fixed website vs. Fluid website vs. Adaptive website vs. Responsive website article. So let’s convert our pixels to percentages.

There is a formula to convert the pixels into percentages. The formula is very simple:

Target / Context = Result

So let’s put values in our formula. For the first column, our Target value will be 65px and our Context value will be our entire website’s value or the width of the .container, that is 1000px (this is going to be constant). Now let’s solve the math:

65px / 1000px = 0.065

The resulting value is 0.065, now to convert this value to the percentage we’ve to move the decimal two places to the right, which means our 0.065 will be 6.5%. Now by using this formula let’s convert our all column and margin values to percentages.  Here are the final codes:


Nilotpal Singha

A professional graphic web designer, blogger, writer.

You may also like...