Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

Grid systems: Monks unveil 5 divine building blocks for your website design

Web designers and developers begin some place. Most of them resort to photoshop, structure their outlines for clients or internal websites, push some pixels around and try to make things look full of life. The problem with this approach is that most designers, who work without matrix frameworks, do not get close enough to accurate and precise web outlines. With changing times, grid layouts became increasingly popular and “that one trend” every other website started focusing upon.

Now, most designers don’t give a second though when it comes to using grid systems. So, which are the new and lesser know, but divine grid systems you should resort and vouch upon?

Simple grid systems


34Grid is all about equal column distribution. It can accommodate unequal distributions as well, but that is not the primary purpose of this grid system. For those of you who want to divide most or all of your pages into horizontally equal portions, this is your framework. The framework is designed to adapt to your requirements. All you need to do is fill up a quick form, determine the requirements of columns and rows and work out on the code that is divided in to two CSS files (base code and code with the media queries). One of the limitations of this framework is inability to nest columns or create more convoluted column arrangements inside a single row. For those of you having simple requirements, this is the perfect system for you.

Simple Grid

Simple Grid is a responsive option that maxes out at a width of 1140 pixels. In other words, while it is designed to play nice with tablets and phones, Simple Grid makes sure that larger screens aren’t left out. Because this grid system is simple, it is lightweight. The whole thing comes in a four-kilobyte uncompressed CSS file. Class names are designed to be easily understood. Like 34Grid, there doesn’t seem to be any provision made for nesting columns.


Toast is for anybody who prefers a simple grid with plain-English class names. This system is easily understandable and implementable. After your usual ‘.container’ and ‘.grid’ elements are put in place, the columns are implemented the old fashioned way. The system also includes some basic typographical styles. Like other simple structures, this grid system is also not meant to be exploited for complicated layouts. Moreover, some of the columns may prematurely end up wide because of the breakpoints defined here.

Advanced grid systems

Proportional Grids

Proportional Grids seem to do away with endless calculations as much as possible by depending on the box-sizing property. The result is a complete, but still pretty lightweight, grid system that covers your bases for responsive layout. Fixed-width gutters are defined bypadding; and box-sizing makes sure the columns play nicely together. Classes are included for changing column dimensions at three different break points. The media queries themselves are structured in the “mobile-first” fashion, in keeping with standard practices. It could have some more columns to work, otherwise it is error-free and well-rounded grid system.


Of the many advanced grid systems on this list, One% is the simplest, but it is by no means incomplete. It’s designed to accommodate somewhat larger screens, and large UI elements. The name comes from the fact that the grid and column width is calculated so that it always equals 99%, instead of 100%. This eliminates the need for some of the more complex repeating decimals and number-rounding that browsers are often forced to do. The grid itself is divided into the classic twelve columns. The classes are simple and two break points are included by default. Although advanced, it still has no nesting columns.

Wrapping it all up, these are just the few of the many grid systems available. Utilize them effectively to sketch a perfect and well-defined web outline, the next time you want to bypass the sloppy layout of PSD. Embrace the divinity today!

The following two tabs change content below.

Webby Monks

Webby Monks, a sister concern effort of Email Monks, offers a great deal of PSD to interactive HTML conversion services blended with interactive library of 100+ interactive components enabling clients to pick and choose best interactive components while placing a PSD to HTML conversion order. Some of our USPs include quick turnaround time, W3C validated end product, robust technological competency, 100 % money back guarantee like Email Monks, 100% hand coded HTML, multi-browser compatibility, clean and commended markups and comprehensive workflows.

One thought on “Grid systems: Monks unveil 5 divine building blocks for your website design

  1. Wonderful! So simple. Unfortunately, I found this article too late – I already found the answer on another service. You’ll forget about paperwork when you try PDFfiller. CUT0068-4S can be filled out in 5-10 mins here http://goo.gl/D5cCsT

Leave a Reply

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks


Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy