The Grids

grid systemFor the last few days (may be a month) I’m looking on a easier way to convert webpage layout image into HTML that will further be processed into a WordPress template. During this exploration, I visited this site 960 grid system (obviously) because, I use 960gs for design web page layouts in adobe Photoshop. It is really easy to place out all the blocks quickly, even without the headache of measuring their sizes, etc. Still I was not completely convinced about the current grid system, I’m using. So,my search was on for other available layout grid systems on the internet i found many, out of which are 3x4grid and YUI grid.

First, talking about 3×4 grid; Quite interesting to play with the real-time, interactive option of creating layout blocks for a web page or a web site. It is quick, easy and fun to use. Click and drag is all you need to do for the blocks you want and voila! you got your layout done along with the CSS. But wait, what about the inner blocks of the web page? This is where 3×4 grid lagging when compared to other two (960 and YUI). With 3×4 grid you can only create the outer frame only and not the inner ones.  I appreciate the development team, but unfortunately, its a not happening thing (at least for me),

Number two comes in the YUI grid, which is much more appreciable than the former one. The inner block creation can be overcome by using this. This too is online interactive option for creating page layout for web. Another advantage is that you set you own width of the layout, specify the header section, the footer, you can also add rows and columns. YUI grid enable the user to create sidebar both left and/or right with some specific width as preset options. I found this one more useful than the former (3×4 grid). Talking about the drawback of this system is that, in future if we want some extra block we need to code our own width and height specific block; at this point, it is good for the one (page) that will remain constant and will not change frequently. Still sometimes, it becomes unmanageable since its not flexible on building blocks on existing page. Therefore, I’m dropping the idea of using this too. 🙁

Finally the 960 grid. The most flexible option a grid system can render. It is not online, not interactive but enjoyable and essential for every web designers. The very simple structural way it has, enables to quickly create, modify or even remove blocks in and out of the page(s). Only thing you need to do is to link the “960.css” to the header of the page you want to use the grid system and then, its something like this: –

Where, ‘container_12’ is the grid holding all other blocks inside; its more like a wrapper div. Since I’m just comparing grid systems available on the internet; documentation is best at the creator’s end. 🙂 But this is all you need to do and keep on calling the grids through class. It also has other options like alpha, omega, push and pull, each one is a boon to the web designer. Alpha is more like a ‘float: left’, the omega, equivalent to ‘float: right’. The other “push” and “pull” is for more flexible <div>s inside the page or block even.

Hence, to my opinion, 960 grid stands alone as a winner due to its flexible nature, use of CSS directly and more simple than any other available grid systems. I’m confident about this one because I’ve self-experimented all the three, but for last two plus years 960gs helped me a lot not only that; even got feedback from others on its ease of use.

Well, thanks for reading my post and if you see any points i overlooked and/or missed out, feel free to comment on. I’m open to suggestions and positive critics. 😉


Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.
  • i would like to read your newer posts, so i will bookmark you. hope to see your updates.

  • brilliant article. keep sharing.

  • Abella

    really good post. i will link to this at my blog.

  • Anadir

    there is always something important and also interesting to learn on your posts.

  • Carla

    i love this.

  • post has been excellent and i have referred it to many of my friends. my honour for the work that you have done. thank you once again.

  • Coralina

    just wanted to comment and say that it is a very interesting post.

  • Elsa

    i love the article, don’t find many that are so clear