Home » Internet » Web Designing » How to create a CSS liquid, fluid or grid based layout

How to create a CSS liquid, fluid or grid based layout



Liquid and fluid layouts fit the width of the screen automatically. Using CSS, you assigns width to various on-screen DIVs and elements %age width instead of fixed width. A good thing about a fluid layout is that it fits the screen no matter what’s the size of your screen, so it looks good on all screen sizes.

The bad thing is that it’s sometimes difficult to create a layout that expands and contracts according to the width of your screen. That’s the reason why many designers go for a fixed-width layout because then you can control your layout in a better manner.

But then with the help of a grid-based layout you can create liquid designs and can also control how your website looks in varying widths. This blog reviews various online tools that help you create frameworks for liquid, fluid, grid based designs. And here’s a good tutorial on how to create a grid based layout with Photoshop and CSS.