Skip to content
pzgz edited this page Aug 26, 2011 · 8 revisions


Flurid is a cross-browser fluid width grid system optimized for flexibility (fluidity) and one of the only fluid width grid systems to work in Internet Explorer versions 5.0 and newer* without hiding pixels in margins. Like any grid system, the basic purpose is to break the page into a series of rows and columns, giving the designer an easy, rational way to organize and present content to the user.

Read about all of Flurid’s features

Why Fluid?

Fluidity, as far as I am concerned, is one of the cornerstones in making web design more accessible, user friendly, customizable and, perhaps most importantly, adaptable. Fluid designs allow the content of a page to adjust according to the dimensions of their containing window, which makes it easy to scale up or down, depending upon the needs of the user or the type of web device being used.

So why aren’t there more fluid grid systems out there that don’t hide pixels in margins? Well, that is due to how different browsers and web devices handle sub-pixel rounding. Flurid deals with the sub-pixel rounding issue by truncating extra pixels from the last column in a row that would normally cause a layout to break (in Internet Explorer). Of course, the problem of sub-pixel rounding in CSS still remains and you may notice that columns will not line up pixel-perfectly in some browsers, but these differences are usually not perceivable by the eye and you are guaranteed that your layout will never break.

Read about browser compatibility


Flurid has a companion jQuery plugin to help make developing with the framework easier. You can read more about it on its project page.


Clone this wiki locally
You can’t perform that action at this time.