Skip to main content

Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks

Tiny Fluid Grid

Tiny Fluid Grid
Inspired by the 1kb Grid, the Tiny Fluid Grid is a super simple fluid layout generator. Its download comes with a index.html with demo code, and the grid.css containing the CSS for the grid that you have created.
Tiny Fluid Grid »

Gridinator – Fixed, Elastic and Fluid Layouts

Gridinator - Fixed, Elastic and Fluid Layouts
The concept for GRIDINATOR is to allow for easy creation of custom, grid-based layouts. As well as being able to create solid fixed grid layouts, you can also choose to create a fluid or elastic layout, click the links below to view the demos:
Gridinator – Fixed, Elastic and Fluid Layouts »

Gridinator Fluid Example »

Gridinator Elastic Example »

CSS Layout Generator – Fixed and Fluid Layouts

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
CSS Layout Generator – Fixed and Fluid Layouts »

Variable Grid System

Variable Grid System
The Variable Grid System is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System and the system was updated last year to allow for fluid grid layouts.
Variable Grid System »

Variable Grid System Fluid Grid Example »

PageColumn.com Layout Generators – Fixed and Liquid

PageColumn.com Layout Generators - Fixed and Liquid
PageColumn.com
offers a selection of different multi-column grid layout generators, you can choose which generator you need from the list below.
2 Column Fixed Liquid Layout Generator »

2 Column Liquid Fixed Layout Generator »

3 Column Fixed Liquid Fixed Layout Generator »

3 Column Liquid Fixed Fixed Layout Generator »

Fluid Grid System

Fluid Grid System
The Fluid Grid System is great for rapid prototyping as well as final production layouts allowing designers to quickly design layouts and make changes to complex pages which have the ability to maintain well-planned horizontal and vertical rhythm.
Fluid Grid System »

Fluid 960 Grid System

Fluid 960 Grid System
The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries. The idea for building these templates was inspired by Andy Clarke, who advocates a content-out approach to rapid interactive prototyping.
Fluid 960 Grid System »

Fluidgrid – A CSS Based Fluid Grid System

Fluidgrid - A CSS Based Fluid Grid System
Fluid Grid
is a new grid system that works the same way as Blueprint or 960, but with any page width, even fluid layouts. It is based only on CSS.
The sad thing is that Fluidgrid is still in development, but you can preview of what you will be able to do with it soon.
Fluidgrid – A CSS Based Fluid Grid System »

FluidGrids – A CSS Framework for Rapid Interactive Prototyping

Emastic – CSS Framework

Emastic - CSS Framework
Emastic
is a very lightweight (4kb) em based CSS grid framework. Its columns (fixed or fluid) are in em from 1 to 75, they can be floated either left or right and its main width can be in either em, px or %.
Emastic – CSS Framework »

Emastic Frameworks Blank CSS Templates »

Elastic CSS Framework

Elastic CSS Framework
Elastic
is a simple CSS framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily. You can view its demos below.
Elastic CSS Framework »

Elastic Columns Demo »

Elastic Web Layouts Demo »

Elastic Layouts Demo »

Elastic Adaptive Columns Demo »

Less Framework

Less Framework
Less Framework
is a CSS framework for building flexible multi-column website layouts. It contains a ten column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.
Less Framework »

The Perfect Fluid Width Layout from CSS Tricks

The Perfect Fluid Width Layout from CSS Tricks
This layout accommodates 90%+ of all internet users. It Shrinks to a minimum of 780px (accomodating users with 800×600 resolution, with no horizontal scroll) and Grows to 1260px (accomodating users with 1280×768 resolution and everything in between).
The Perfect Fluid Width Layout from CSS Tricks »

View the Demo »

SuperStretch! – A Vertically Fluid Layout Using CSS

SuperStretch! – A Vertically Fluid Layout Using CSS
This layout stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8
SuperStretch! – A Vertically Fluid Layout Using CSS »

View the Demo »

Liquid Layout Templates by Andrew Sellick

Here you will find a collection of six liquid layout templates by Andrew Sellick, you can view and download them below:

Liquid Left – Fixed Right Template 
Liquid Left – Fixed Right Template
by Andrew Sellick


Demo & Download »

Fixed Left - Liquid Right Template 
Fixed Left – Liquid Right Template
by Andrew Sellick


Demo & Download »

Liquid Left - Two Fixed Right Template 
Liquid Left – Two Fixed Right Template
by Andrew Sellick


Demo & Download »

Fixed Left - Liquid Middle - Fixed Right Template 
Fixed Left – Liquid Middle – Fixed Right Template
by Andrew Sellick


Demo & Download »

Equal Height Columns Template 
Equal Height Columns Template
by Andrew Sellick


Demo & Download »

Liquid Left - Two Fixed Right Template 
Liquid Left – Two Fixed Right Template
by Andrew Sellick


Demo & Download »

CSS Website Layouts and Templates (justdreamweaver.com)

All of the liquid layouts are coded to have a minimum page width of 760 pixels and a browser window width of 80 percent. The elastic layout widths are defined in ems, so as the text size increases, so does the width of the content containers. You can view and download the templates below:

1 Column Liquid, Centered, Header and Footer 
One Column Liquid & Centered Layout
via justdreamweaver.com


Demo & Download »

2 Column Liquid & Left Sidebar 
Two Column Liquid & Left Sidebar Layout
via justdreamweaver.com


Demo & Download »

Two Column Liquid & Right Sidebar, Header and Footer 
Two Column Liquid & Right Sidebar Layout
via justdreamweaver.com


Demo & Download »

3 Column Liquid, Header, and Footer 
Three Column Liquid Layout
via justdreamweaver.com


Demo & Download »

3 Column Elastic, Header, and Footer 
Three Column Elastic Layout
via justdreamweaver.com


Demo & Download »

2 Column Elastic, Left Sidebar, Header, and Footer 
Two Column Elastic & Left Sidebar Layout
via justdreamweaver.com


Demo & Download »

2 Column Elastic, Right Sidebar, Header, and Footer 
Two Column Elastic & Right Sidebar Layout
via justdreamweaver.com


Demo & Download »

Dynamic Drive Liquid CSS Layouts

Dynamic Drive offers a collection of liquid CSS layouts, where the layout spans the entire page width wise, expanding and contracting as the page is resized.
You can view the templates below:

CSS Layout (Fluid-Fluid-Fixed) 
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fixed-Fixed-Fluid) 
CSS Layout (Fixed-Fixed-Fluid)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fluid-Fixed) 
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fluid-Fixed) 
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fixed-Fixed) 
CSS Layout (Fluid-Fixed-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fluid-Fluid) 
CSS Layout (Fluid-Fluid-Fluid)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fluid-Fixed) 
CSS Layout (Fluid-Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fixed-Fluid-Fixed) 
CSS Layout (Fixed-Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fixed) 
CSS Layout (Fluid-Fixed)
via Dynamic Drive


Demo & Download »

CSS Layout (Fixed-Fluid) 
CSS Layout (Fixed-Fluid)
via Dynamic Drive


Demo & Download »

CSS Layout (Fluid-Fluid-Fluid) 
CSS Layout (Fluid-Fluid-Fluid)
via Dynamic Drive


Demo & Download »

Perfect Multi-Column CSS Liquid Layouts (matthewjamestaylor.com)

This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They're also 'stackable' so you can use multiple column types on the one page. This makes the number of possible layouts endless!
You can view the liquid templates below:

Perfect 2 Column Liquid Layout (right menu) 
Two Column Liquid Layout (Right Menu)
via matthewjamestaylor.com


Demo & Download »

2 Column Liquid Layout (Double Page) 
Two Column Liquid Layout (Double Page)
via matthewjamestaylor.com


Demo & Download »

Full Page Liquid Layout 
Full Page Liquid Layout
via matthewjamestaylor.com


Demo & Download »

Multi-Column Stacked Liquid Layout 
Multi-Column Stacked Liquid Layout
via matthewjamestaylor.com


Demo & Download »

3 Column Liquid Layout 
Three Column Liquid Layout
via matthewjamestaylor.com


Demo & Download »

3 Column Liquid Layout (Blog Style) 
Three Column Liquid Layout (Blog Style)
via matthewjamestaylor.com


Demo & Download »

2 Column Liquid Layout (Left Menu) 
Two Column Liquid Layout (Left Menu)
via matthewjamestaylor.com


Demo & Download »

Liquid CSS Layout Templates by Design Shack

Design Shack have a collection of 12 great CSS templates to base your design on, both fixed and fluid layouts. These free CSS templates are designed by Mitch Bryson, and provided for you with his permission. You can view the liquid templates below:

One Column Fluid CSS Layout 
One Column Fluid CSS Layout
via Design Shack


Demo & Download »

Two Column Fluid CSS Layout 
Two Column Fluid CSS Layout
via Design Shack


Demo & Download »

Two Column Fluid CSS Layout 
Two Column Fluid CSS Layout
via Design Shack


Demo & Download »

Three Column CSS Layout 
Three Column CSS Layout
via Design Shack


Demo & Download »

Three Column Fluid CSS Layout 
Three Column Fluid CSS Layout
via Design Shack


Demo & Download »

Three Column CSS Layout 
Three Column CSS Layout
via Design Shack


Demo & Download »

100 Percent CSS Liquids Layout (ironmeyers.com)

100 Percent CSS Liquids Layout (ironmeyers.com)
These CSS Layouts offer full Grade-A browser support. Each CSS Layout will look and behave the same in all internet browsers, like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. You can choose from either the 100% width templates or 974, 950 or 750px fluid layouts.
100 Percent CSS Liquids Layout (ironmeyers.com) »

Layout Gala – Liquid Layouts

Layout Gala - Liquid Layouts
The CSS of the examples, which is embedded in both online and the download versions, has been kept to the minimum in order to focus on the most important thing, as is the layout. In fact, the CSS has been divided, with an empty line, between two logical parts: the first is for typography and colors, while the second and most important is for the layout itself.
Layout Gala – Liquid Layouts »

Liquid, Fluid & Elastic Basic Layout Tutorials

Create a Simple Liquid Layout (.net magazine) »
This is a fairly old (2006) tutorial, but uses modern trend relevant techniques. Its purpose is to produce a robust cross-browser liquid layout, using absolute positioning rather than the more commonly known technique of using floats.
Liquid Layouts the Easy Way »
This article explains one method of achieving a successful liquid layout as well as providing basic definitions of liquid, fixed-width and em-driven layouts.
CSS Liquid Layout Designs Tips »
Here are few tricks that you can use when it comes to working with semi-liquid layouts.
Create a 3 Column Fluid Layout using HTML/CSS »
This tutorial will teach you how to create a fluid 3 column layout using HTML & CSS.
How to Create a Fluid Grid with jQuery »
This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout. The algorithm/procedure used in this tutorial is very simple and easy to follow.
Demo

Liquid, Elastic & Fluid Further Reading

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? »
This article discusses the pros and cons of each type of layout. Either one can be used to make a successful website layout, as long as you keep usability in mind.
Adaptive CSS-Layouts: New Era In Fluid Layouts? »
In this article, it discusses effective techniques to create 100%-functional adaptive CSS-layouts, and provide details on other tutorials and practices.
A List Apart articles on Fluid, Liquid and Elastic Layouts
Fluid Grids
, Elastic Design & In Search of the Holy Grail.

Comments

Popular posts from this blog

Evolution Of Computer Virus [infographic]

4 Free Apps For Discovering Great Content On the Go

1. StumbleUpon The granddaddy of discovering random cool stuff online, StumbleUpon will celebrate its 10th anniversary later this year — but its mobile app is less than a year old. On the web, its eight million users have spent the last decade recommending (or disliking) millions of webpages with a thumbs up / thumbs down system on a specially installed browser bar. The StumbleUpon engine then passes on recommendations from users whose interests seem similar to yours. Hit the Stumble button and you’ll get a random page that the engine thinks you’ll like. The more you like or dislike its recommendations, the more these random pages will surprise and delight. Device : iPhone , iPad , Android 2. iReddit Reddit is a self-described social news website where users vote for their favorite stories, pictures or posts from other users, then argue vehemently over their meaning in the comments section. In recent years, it has gained readers as its competitor Digg has lost them.

‘Wireless’ humans could backbone new mobile networks

People could form the backbone of powerful new mobile internet networks by carrying wearable sensors. The sensors could create new ultra high bandwidth mobile internet infrastructures and reduce the density of mobile phone base stations.Engineers from Queen’s Institute of Electronics, Communications and Information Technology are working on a new project based on the rapidly developing science of body-centric communications.Social benefits could include vast improvements in mobile gaming and remote healthcare, along with new precision monitoring of athletes and real-time tactical training in team sports, an institute release said.The researchers are investigating how small sensors carried by members of the public, in items such as next generation smartphones, could communicate with each other to create potentially vast body-to-body networks.The new sensors would interact to transmit data, providing ‘anytime, anywhere’ mobile network connectivity.Simon Cotton from the i