360 grid -- Finish out row with odd number of records

Question

I'm trying to accomplish this, with the 360 grid system: https://i.stack.imgur.com/gL8lk.jpg

From a database i'm getting products which will be displayed in lines with 4 on each.

It's working perfectly if there is exactly 4 products under each category, but if there is less than 4 products in a category, the design is messed up, because the div's not closed properly. Problem is that sometimes there's only 3 or less products on a line.

Is there any of you who knows how to accomplish this?

for($i=0 ; $i<$countprod ; $i++){

    $prevprod = $products[$i-1]['name'];
    $curprod = $products[$i]['name'];
    if($curprod != $prevprod){
        echo '<div class="grid_12 alpha omega"><h2>'.$products[$i]['catname'].'</h2></div>';
    }


    if ($i == 0){ echo '<div class="grid_3 '; }
        if ($i % 4 == 0) { echo ' alpha">'; }
        elseif($i % 4 == 3) { echo '</div><div class="grid_3 omega">'; }
        else{ echo '</div><div class="grid_3">';
    }

        echo $product[$i]['image'];

    if ($i % 4 == 3) {
        echo '</div><div class="clear"></div>';
        echo '<div class="grid_3';
    }

}

(sorry about the title, i didnt know what to call this question :) )

Could you add a sample of the desired output that you've manually created yourself? Preferably, stick it on [jsFiddle](http://jsfiddle.net/). — thirtydot, Mar 28 '11 at 13:53

Mark · Answer 1 · 2011-03-28T13:48:30.750

1

echo '<div class="grid_3';

You aren't closing this tag.

edited Mar 28 '11 at 13:48

answered Mar 28 '11 at 13:42

Mark

5,680
2
25
26

His name's Mark, and he actually read the code, God bless him. – Smandoli Mar 28 '11 at 13:48

score 0 · Answer 2 · answered Mar 28 '11 at 13:49

$p = 10; // Current number of products

$ppr = 4; // Products per row
$x = $i % $ppr;

if($x != 0){
    $countprod = $p + ($ppr - $x);
}

echo $countprod; // 12 (4 * 3)

Loop with FOR if there is no product just print empty DIV, if that's what you have asked...

score 0 · Accepted Answer · answered Mar 28 '11 at 14:34

Have a try with

$countprod = count($product);
$prevprod = '';
$close_div = false;
for ($i=0; $i<$countprod; $i++){

    $curprod = $products[$i]['name'];
    if($curprod != $prevprod){
        if ($close_div) echo '</div>';
        echo '<div class="grid_12 alpha omega"><h2>'.$products[$i]['catname'].'</h2></div>';
    }

    if ($i % 4 == 0) { 
        echo '<div class="grid_3 alpha">';
        $close_div = true;
    }
    elseif ($i % 4 == 3) {
        echo '</div><div class="grid_3 omega">';
        $close_div = true;
    }
    else { 
        echo '</div><div class="grid_3">';
        $close_div = true;
    }

    echo $product[$i]['image'];

    if ($i % 4 == 3) {
        echo '</div><div class="clear"></div>';
        $close_div = false;
    }
    $prevprod = $curprod;
}

Thank you M42, with a little modification to suit my existing code, this is the one i've used. — Crave, May 27 '11 at 08:27

360 grid -- Finish out row with odd number of records

3 Answers3