The fluid grid concept (flexible grid) for responsive web design in CSS3

In this blog I am trying to elucidate the fluid grid concept for responsive web design using CSS3.

A fixed width design is not the finest solution for your designs and therefore liquid layouts are the new answer. The fluid grid concept is goes beyond the liquid layout concept, where the elements are basically resized and kind of rearranged. A fluid grid (flexible grid) summary relies on stop thinking in fixed pixels and start considering percentage units. A fluid grid renovates your design in terms of proportions. It is recalculate an element’s proportions accordingly, you must take the element’s width and divide it by the full grid’s size e.g. 200 px / 960 px = 0.2083, then take this result and multiply it by 100 (0.2083 * 100 = 20.83 %), that we you get the percentage value that needs to be applied over the element in order to perform a correct resizing.

Although fluid grids can be useful for performing an exact resizing when moving from one resolution to another resolution, it can get a little bothersome when you have various column systems and you want to make them fit in a Smartphone screen, fortunately this problem has been solved with media queries.

Leave Comment