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

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;
}

Now if you run the following code, it will generate the complete grid for you.

$pattern = "8+4.3+3+6.6+6.12";
echo parseTo1KbGrid($pattern);

The output will be like this

<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>

For 960 CSS grid framework, use the following routine

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;
}

Designing grid layout for 1kbgrid and 960 is now even easier, eh?