html - Display Different Number of - Per Row -

html - Display Different Number of <li> Per Row -

i create first row of have 3 products , sec row 2 products , pattern repeats.

here code

<ul class="products-grid products-grid--max-<?php echo $_columncount; ?>-col"> <?php $_columncount = $this->getcolumncount(); // value 3 ?> <?php $i=0;$k=1;foreach($products $product ?> <li class="item <?php echo ($k==4) || ($k%10==0)? 'big ': '' ?> <?php if(($i-1)%$_columncount==0): ?> first<?php elseif($i%$_columncount==0): ?> last<?php endif; ?>"> <?php echo $product->getname() ?> <?php $k++;?> </li> <?php endoforeach; ?> </ul> <style> .big,.big img { width: 60% !important; height: 278px !important; } </style>

the big class applies 4th, 10th,14th,20th... <li> create sec row 2 products. problem 3rd <li> in sec row takes entire row , pushing downwards next <li> next row.

screen shot link http://i59.tinypic.com/jjr4vc.jpg

this magento , product list scss file reference.

any help appreciated.

// mixin outputs styles allow grids more 3 columns @mixin product-grid($column-count, $container-width, $class-append:"") { // allow mixin used more specific purposes, such grids contained within widgets @if $class-append != "" { $class-append: -#{$class-append}; } /* config: columns + flexible gutter */ $column-gutters: ($column-count) - 1; $container: $container-width - (2 * $trim); $column-width: ($container - ($column-gutters * $product-column-spacing)) / $column-count; /* undo three-column config */ .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(odd) { clear: none; } .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(3n+1) { clear: none; } .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(even), .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(3n) { margin-right: percentage($product-column-spacing / $container); } /* set column config */ .products-grid--max-#{$column-count}-col#{$class-append} > li { margin-right: percentage($product-column-spacing / $container); } .products-grid--max-#{$column-count}-col#{$class-append} > li { width: percentage($column-width / $container); margin-right: percentage($product-column-spacing / $container); } .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(#{$column-count}n+1) { clear: left; } .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(#{$column-count}n) { margin-right: 0; } }

following script worked me.

<ul class="products-grid products-grid--max-<?php echo $_columncount; ?>-col"> <?php $i=0; $k=$_columncount; foreach ($_productcollection $_product): ?> <?php $class=""; if($i%$k == 0){ $class='big'; } $i++; if($i==$k){ $i=0; $k--; } if($k == 0) { $k=$_columncount;$i=0; } ?> <li class="item <?php echo $class;?><?php if(($i-1)%$_columncount==0): ?> first<?php elseif($i%$_columncount==0): ?> last<?php endif; ?>"> <?php echo $product->getname() ?> </li> <?php endoforeach; ?> </ul> <style> .big { clear:both; /*width: 60% !important; height: 278px !important;*/ } </style>

hope help you.

html css magento layout html-lists