| Posted under Articles

A simple Responsive Grid System without using Bootstrap

There are several responsive Grid Systems out there like Bootstrap & Zurb Foundation. They can help you create a project as they include many libraries for Grid, buttons, navigation, etc.

They can be useful, however they are quite restricting in terms of design, plus it is a bit hard to get started in using them.
Personally, i never use them as i find they limit what i can do when it comes to design & responsiveness.

Let's see the main disadvantages:

  • These libraries tend to be restricting. You do not have the freedom to follow the design and is usually binding when it comes to responsive design. I need to create my grids and elements according to the design and decide when to have breakpoints in my CSS.
  • They have lots of css & js code which of course makes your site heavier.
  • They do take time to learn and start using them.
  • They can require a Lot of Style Overrides

So why use them when you can create your own grid?

Of course you get a standardized platform and a consistent UI, but you can create in on your own. This way you have 100% control of the code and no limitations.

For this reason i created the following pen, demonstrating a simple responsive Grid System:

I have created a pen a Simple Responsive Grid System on CodePen.

First, you need to create your grid:

.grid{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

By setting width:90% you limit the width of your grid. Of course here you may have 100%, 80% or whatever suits your needs. For most projects 90% is fine.

max-width: 900px; will set a fluid grid: For small screens the grid has a width of 90% while for bigger screens the width is never over 900px.

You can have several grids with different max-width for each. It is a very common practice in websites. The key is to have the same width for all of them.

Then you have the columns.

Below there is an example of a column that takes up 1/3 of the grid and a column that takes up half the grid:

.col-33{
    width: 33.3%;  // 1/3 of the grid (100% / 3 = 33.3%)
}
.col-50{
    width: 50%;   // 1/2 of the grid (100% / 2 = 50%)
}

Of course you will need to use float:left; or display: inline-block; to make the columns stand next to each other.

You can actually create any width you want: 4 columns (25% width), 5 columns (20% width) and so on.

Then we have the gutter: We do not want our columns to stick next to on another.

.gutter{
    margin-left: 20px;
    margin-right: 20px;
}

If the space you want between the columns is 40px, then the gutter is 20px on each side for each column. This will make them look equal plus you will not have any problems in responsive design.

Thats it! we have created our grid exactly the way we need it.

All we have to do now is make it responsive. I usually resize my browser and set breakpoints whenever i see the columns get jammed. Just avoid having too many breakpoints for obvious reasons.

So for example:

@media all and (max-width:600px) {
    .col-50, .col-33{
        width: 100%;
        float: none;
    }
}

Will set both of the columns to width:100% for the mobile view.

Thanks for your likes, this will motivate me to write posts more often!