Comparision of CSS Grid frameworks

We’re targetting into “using a grid CSS framework” in HTML development. The reason is: using grid helps a lot in defining the layout structure, make it better, more efficient. However, there are a lot of CSS Grid frameworks out there. We need a comparision and benchmark. So, how?

I did a quick research this morning and write this short article for the team. I let them do the next step. This article is just a short introduction in term of concept based on some articles I’ve read.

Concepts

To make the page flexible enough in term of layout, there are 2 approaches till now:

Adaptive layout: using the media query to make the CSS specific rules to adapt different kinds of layout. Each range condition is considered as breadkpoint.
Fluid layout: using percentage to make the layout scale.

What are criterias to compare CSS Grid system?

Mostly, when doing comparision among different CSS Grid frameworks – the community is focusing on below criterias:

The number of column: some CSS Grid frameworks limits the number of column that user can define, some does not. It’s better if we have the max number of column that we can define.
Dependencies: some CSS Grid frameworks cannot work independently, they need to run with some other CSS framework like LessCSS, SaaS … However, this dependencies is not a big deal.
Fluid layout support: Some CSS Grid frameworks are designed to work only on Fluid OR Adaptive approach. It’s good to have both in supporting of the CSS framework. (Ref: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/)
Semantic: CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.
Nestable: allow nestable grid structure or not.
Can work with IE6: :), you know why this is a condition to consider, right?
Work without Javascript: Some CSS Grid framework are designed to run with some JS code behind. The heavy JS processing, the heavy layout is.