Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks

In recent years, screen resolutions are getting both bigger (large monitors) and smaller (in the mobile sense), as such, a static or fixed web layout may no longer be deemed completely viable. Maybe its time to change.

Liquid, fluid and elastic layouts, have as many supporters as fixed layouts, despite what ever your feelings are on these styles of layouts, having some knowledge on adapting a site to liquid or elastic would most definitely be a plus in your arsenal.

In this article you will find a collection of starter and basic fluid/liquid and elastic layouts, CSS frameworks and some useful tools to help you with your next project.

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

FluidGrids - A CSS Framework for Rapid Interactive Prototyping
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 TemplateLiquid Left – Fixed Right Template
by Andrew Sellick

Demo & Download »


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

Demo & Download »


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

Demo & Download »


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

Demo & Download »


Equal Height Columns TemplateEqual Height Columns Template
by Andrew Sellick

Demo & Download »


Liquid Left - Two Fixed Right TemplateLiquid 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 FooterOne Column Liquid & Centered Layout
via justdreamweaver.com

Demo & Download »


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

Demo & Download »


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

Demo & Download »


3 Column Liquid, Header, and FooterThree Column Liquid Layout
via justdreamweaver.com

Demo & Download »


3 Column Elastic, Header, and FooterThree Column Elastic Layout
via justdreamweaver.com

Demo & Download »


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

Demo & Download »


2 Column Elastic, Right Sidebar, Header, and FooterTwo 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 LayoutFull Page Liquid Layout
via matthewjamestaylor.com

Demo & Download »


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

Demo & Download »


3 Column Liquid LayoutThree 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 LayoutOne Column Fluid CSS Layout
via Design Shack

Demo & Download »


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

Demo & Download »


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

Demo & Download »


Three Column CSS LayoutThree Column CSS Layout
via Design Shack

Demo & Download »


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

Demo & Download »


Three Column CSS LayoutThree 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.

Author: (583 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments