Grid systems are all the rage in web design these days. There’s a good reason for that. Once the initial investment in time and effort is made to set up the basic mechanics in CSS, you can focus on more on rapidly creating a complex page layout instead of pushing and nudging pixels to get things to fit the whole time. The basic premise is subdividing the page into columns and creating classes that fit perfectly and predictably within these columns.

Grid SystemThe added advantage to using a grid system is that it also works well for responsive web design (RWD). That means that the layout can respond effectively to whatever display it’s being viewed on – mobile, tablet, desktop and other variations. One layout ends up being effective across a multitude of devices with one code base. Now that’s efficient!

Check out the videos below to understand how these grid systems are built and how to use them in context to create complex and profesional looking page layouts with a minimum of effort. The learning curve is relatively low and the concepts demonstrated in this video series apply to most grid systems out there or they’ll assist you in building your own!

Walkthrough of a Simple Grid System