LiquidGrid is a smart flexible and adaptive CSS Grid System/Framework. You can view a demo here.
Usage/Code
First you just have to create a div layer with class “grid” (<div class=”grid”></div>). In this div layer you must put another div layer with the class “grid_XXX”. For XXX you choose a number for the witdh. For example “grid_50″ (<div class=”grid_50″></div>) for a 50% box. (Possible numbers are 5% 10% 20% 25% 30% 33% 40% 50% 60% 70% 75% 80% 90% and 100%). You can also put several div layers in the main div layer. The sum of all grids_XXX may not exceed 100%. The margins are 1%. Feel free to change the margins.
For example the code for two 20% boxes and one 60% box looks like this (20+20+60=100):
Three 20% boxes an one 60% box won’t work because its lenght is 120% (20+20+20+60=120 > 100).
CSS-Code
/* -----------------------------------------------------------------------
LiquidGrid a flexible/adaptive Grid System
http://www.webdesign.mkirste.de
* License under GPL: http://www.gnu.org/licenses/gpl.html
----------------------------------------------------------------------- */
div.grid {
height:auto;
width:102%;
margin:0 0 0 -1%;
clear:both;
}
div.grid > div {
margin:0 1%;
float:left;
}
div.grid_5 {width:3%;}
div.grid_10 {width:8%;}
div.grid_20 {width:18%;}
div.grid_25 {width:23%;}
div.grid_30 {width:27.9%;}
div.grid_33 {width:31.333%;}
div.grid_40 {width:38%;}
div.grid_50 {width:48%;}
div.grid_60 {width:58%;}
div.grid_70 {width:68%;}
div.grid_75 {width:73%;}
div.grid_80 {width:78%;}
div.grid_90 {width:88%;}
div.grid_100 {width:98%;}
Demo Page
You can see a Demo page here.
Download
You can download the source here.
Credits
License under GPL. Feel free to use and edit it! I would be happy if you link back.
Feedback
If you have some notes, just send me some feedback.