Picking a CSS Grid Layout: 7 CSS Frameworks I Researched and Reviewed

Articles CSS Web Site DevelopmentPublished April 19, 2011 at 4:01 pm No Comments

Having found myself writing code that was duplicating what existing CSS grid frameworks were already providing I decided to look into the various website layout framework and template choices and make use of one of them rather than design and build something from the ground up. If you aren’t familiar with the concept behind CSS Grid Layouts, it’s pretty simple: Make sure all your content lines up neatly by providing a fixed number of horizontal columns and then for each of your columns, you set how many of the template columns to span. The HTML is normally a case of defining <div class=”col_6″> for a column spanning six of the pages presets, totally up to the number of columns wide your layout template covers. This isn’t rocket science and while some of the frameworks add some extra touches too the main reason to go for a standard rather than rolling my own is to save having to write all the individual classes from the ground up (Or more likely a bit of code to do it for me) and because they already have work arounds for a couple of the problems you might come up against with browser compatibility and such.

I had a few requirements that I needed to meet, most importantly it needed to work nicely with jQuery UI which I use to style all my user interface elements, it needed to be 1200 pixels wide and I didn’t want anything that went beyond the layout of the html page. It also needed to be free for commercial use or Open Source which probably goes without saying but it can be frustrating to find a perfect solution only to find a huge price tag attached to it.

 

960.gs

960.gs was the first CSS layout solution I came across and what made me notice I was actually building a CSS grid system myself. This was also mentioned to me on Twitter and seems to be the first one placed in many top 10 style lists.

However, there was one show stopper for me: It’s designed around a 960px wide template and all my web sites are designed for Intranet/internal pages that display at 1200 pixels wide. It might not seem like much when most of your content is text but in a system which is data table heavy such as an accounts solution that extra space is critical.

But since I had a solid starting point I went to Google to find alternatives to 960.gs by searching for “grid 960 for 1200 wide” which lead to:

 

1200 Grid System

Using 960.gs as it’s inspiration the 1200 Grid System was exactly what as was looking for this seemed to fit the bill perfectly, simple and easy to use with just enough to control the layout in a way that made sense to me and nothing else. When you code web sites from multiple tools and resources this is a good thing as you want to be free to pick and choose individual components as fits each project rather then have too many features all bundled together.

 

1200 PX Grid System

1200 PX Grid System was another result from the same search for 960.gs alternatives but the lack of documentation and examples put me off. It does offer a generator tool that lets you select your own column width, number of columns and gutter width to dynamically create flexible grids for more diverse resolutions which is a nice touch so might well have it’s place.

 

YAML

I’ve looked at YAML in the past and it came up again as I looked for grid layout solutions, and while it may have it’s place for the way some designers work it’s focus is on the whole page template downwards didn’t fit my needs at all and the Builder Tool that lets you interactively create the initial template looks useful if you’re designing a static web page and want a layout quick, but for a coded solution that is created in multiple parts in the backend it adds confusion more then anything. So not what I was after, but perhaps worth a look if you’re looking for a CSS template generator or something that offers a bit more functionality.

 

1140 CSS Grid

1140 CSS Grid came from a timely tweet nothing to do with my own searches or question on twitter, okay it’s 60px smaller then a was planning but I was willing to overlook that. This one has some very cool features, in particular it has a touch of javascript that will automatically scale images down to fit it’s container and as a fluid layout it degrades nicely on smaller screens and at a certain point in slips to a single column mode automatically so mobile browsers are supported. For me though, the size of it’s gutters just seemed a bit too big, which is a trivial point considering I really liked the extras it added.

 

Elastic CSS Framework

From my first look at Elastic CSS Framework the big show stopper for me was it’s structure around a 4 column template which was far too restrictive for the type of content I create but it was interesting to see that a lot of the conventions used in 960.gs and it’s alternatives follow though as best practices still, while not as fully enriched as YAML this still seemed to be better targeted at people who need a simple HTML template for more static pages.

 

Bluetrip CSS Framework

Bluetrip CSS Framework is one of several CSS frameworks that merge multiple projects, at which point it became obvious to me that if it was drawing inspiration from more the one place it was probably doing more then I needed it too. Sure enough, BlueTrip goes further then layout – which is based on 960.gs – to add typographic controls and form layout and styles. If I wasn’t using jQuery UI and working from the ground up this might have been an attractive starting point but for me, it was trying to do to much.

At this point, I’d seen enough to get a feel for how different mindsets were approaching solutions to CSS grids and I decided to go back to the result I came across first, 1200 Grid System.

 

Conclusion

I’ve opted to go with the first search result I found in the end, 1200 Grid System, which I didn’t have much to say about when reviewing them but that stems from the fact it’s a nice simple solution that handles my website layouts the way I like. All the different solutions I came across had something to offer in their own right and in many ways with something so simple it doesn’t really matter what you pick as long as you’re comfortable with it, for me going that step further a researching a few variations on 960.gs help me be happy that my first impression was correct and that I wasn’t missing anything glaringly obvious.

I’ve probably missed some of the options available and this is far from a comprehensive list owing to the fact that I found something that did exactly what I wanted early on but it would be great to hear if anyone has systems of their own they use to the same effect or different preferences.