If you are familiar with css grid frameworks like 960 or 1kbgrid, then you already know that designing the layout is just repeating the container divs in a specific pattern. These grids made our page layout design into a easy job. But if you are one lazy ass like me and dont want to write that much(?) at all, then grab yourself a piece of cake and use the following snippet.

Say you are using 1kbgrid and your grid layout contains 3 rows,
1st row contains 2 spans where1st span is 8 column wide, 2nd span is 4 column wide
2nd row contains 3 spans which has a width of 3 column, 3 column and 6 column respectively
3rd row has 2 spans where 1st span has 6 column and 2nd span has 6 column
4th row has only one span of 12 column width

Now lets write a pattern like the following
8+4.3+3+6.6+6.12

If you look carefully then you will see that “.” is used as a row separator, and in each row spans are separated by a “+” sign following their width in column 🙂

[sourcecode lang=”php”]
function parseTo1KbGrid($pattern){
$grid ="";
$rows = explode(".", $pattern);
foreach ($rows as $row){
$grid .= "<div class=’row’>\n";
$spans = explode("+",$row);
foreach($spans as $span){
$grid .= "<div class=’column grid_{$span}’><p></p></div>\n";
}
$grid .="</div>\n";
}
return $grid;
}
[/sourcecode]

Now if you run the following code, it will generate the complete grid for you.
[sourcecode lang=”php”]
$pattern = "8+4.3+3+6.6+6.12";
echo parseTo1KbGrid($pattern);
[/sourcecode]

The output will be like this
[sourcecode lang=”html”]
<div class=’row’>
<div class=’column grid_8′><p></p></div>
<div class=’column grid_4′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_6′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_12′><p></p></div>
</div>
[/sourcecode]

For 960 CSS grid framework, use the following routine
[sourcecode lang=”php”]
function parseTo960Grid($pattern) {
$grid ="";
$rows = explode(".", $pattern);
foreach ($rows as $row) {
$grid .= "<div class=’container_12′>\n";
$spans = explode("+",$row);
foreach($spans as $span) {
$grid .= "<div class=’grid_{$span}’><p></p></div>\n";
}
$grid .="<div class=’clear’></div>\n";
$grid .="</div>\n";
}
return $grid;
}
[/sourcecode]
Designing grid layout for 1kbgrid and 960 is now even easier, eh?