Khoi Vinh has been touting Grid Layouts for years. From his efforts there have been many, many solutions to helping people use Grid Layouts successfully. Thanks to a recent brilliant idea of Jon Hicks and code execution by Teevio, I present to you Grid Layout JS.
The Grid Layout Javascript enables web-developers to stick to a Grid Layout quickly and simply by including the Grid Layouts Javascript file and simple XHTML code. Currently, the Grid Layouts Javascript relies on jQuery.
To get started paste the following lines into the <head> of your webpage:
<script src="http://gridlayouts.com/_assets/_js/jquery.js"></script>
<script src="http://gridlayouts.com/_assets/_js/gridlayout.js"></script>
Then use the fancy form below to generate the XHTML code for your webpage (grid calculator is a good resource for grabbing these numbers):
<div id="GridLayout">
<div id="GridLayout-params">
{
column_width:190,
column_count:2,
subcolumn_count:2,
column_gutter:10,
align:'center'
}
</div>
</div>
Once you've pasted this code into your webpage use CTRL+SHIFT+G, or if you are using Firefox on Windows, CTRL+ALT+G to toggle the grid.
Questions? Comments? Send an email to