Why Don’t You Love Grids?

Having recently become a convert to Grid Layouts, I find myself looking at more and more sites’ code and seeing that grids are still grossly under-represented.

While I accept that grids might not always be the only right solution for every web design situation, I think that they are a tool that should be seeing higher rates of adoption than they currently enjoy.  If I’d known more about the design approach earlier, I would have saved a considerable amount of time and effort. But Grids don’t seem to have the sort of exposure that, say, CSS standards do. Why should that be? Is it even a problem that some people might be missing out on a design approach that could potentially be a better solution to a problem they’re working on?

What is a grid?

To quote from Wikipedia:

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.

In other words, a grid divides your web page into predictable, consistent lines and columns thus affording you an easy-to-manage page structure upon which you can quickly build.  Because the page element behaviours are defined in CSS, you can apply designs faster and have your page looking the way you intend easily across all browsers.

Where is the uptake?

So given that grids can be such a useful tool, why aren’t they being used more frequently?

Popular views seem to range from the attitude that the effort outweighs any benefit gained, that the typically fixed-width structure does not lend itself well enough to mobile devices or that those who know enough about CSS are past a point of needing a framework to structure their pages.  I personally think that of these opinions, only the second argument carries any weight and even then, there are fluid frameworks that are highly effective in their own right.

So what effort is required to implement a grid layout on your site?  In short – not much, but it depends on what your needs are.  Many grid frameworks out there provide extremely comprehensive coverage catering for complex site designs.  These take time to understand and time to plan, but many people don’t need that degree of structure and would benefit more from leaner and more transparent layouts.  Nicole Sullivan’s OO CSS framework provides a good balance between flexibility and simplicity.  You can work on the basis of dividing and sub-dividing each row (line) into smaller and smaller fractions; allowing you to achieve very granular degrees of detail without lots of complex classes.

I’ve found that as I’ve become more proficient with CSS, I’ve found that having a simple pre-packaged CSS framework saves me a lot of time from having to constantly repeat that same page structure coding that lays out the foundation of my web applications.  By importing the framework’s grid definitions, I have half my work done for me.  The layout is all ready to go and I only need to enhance it with the “colouring-in” presentational stuff.

Other developers may already have a set of pret-a-porter CSS classes that they can drop into any site and this may achieve much the same effect as a more formal framework, but the key takeaway for me is “you should save yourself some time and have something like this in your array of tools”.

At the end of the day, you should do what is best for your own circumstances, but at the same time do yourself a service and look into this grid thing.  Other people have and have wondered why it didn’t occur to them sooner.  Perhaps you will have a similar experience.