How to show multiple row in single row using gridview

Question

i want to show grid view like magento http://demo.magentocommerce.com/catalog/category/view/s/cellphones/id/8/

here we can see that multiple items are shown in same row... on the above link we can see that 3 item(rows) are shown per row..

currently i'm using this code and using this single row are shown per row

<?php
$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$dataProvider,
    'enablePagination'=>false,
    'columns'=>array(
        'brand',
        array(
          'name'=>'model',
            'header'=>'Model',
            'type'=>'raw',
            'value'=>'$data->model.($data->marketing_name?" (".$data->marketing_name.") ":"")'
        ),
        array(
            'name'=> 'platform',
            'header'=>'Platform',
            'type'=>'raw',
            'value'=>'$data->platform->platform." ".$data->platform->platform_version'
        ),
        array(
            'name'=>'add',
            'header'=>'Action',
            'type'=>'html',
            'value'=>  'CHtml::link("Add To My device", Yii::app()->createUrl("/site/add_device/id/".$data->id))',
        )
    ),
));
?>

Answer 1

CGridView always displays each item in a separate row. For more flexibility (e.g. displaying three items side by side) you have to switch to using CListView instead, but this means you have to do more things yourself.

CListView has an itemView attribute that you have to set and uses the specified view to render each item in the list. Together with the template and itemsTagName attributes this lets you fully customize the HTML produced by your list.

To display three items per row you can use any general-purpose CSS technique such as giving each item display: inline-block and a fixed width of 1/3 of the container width; this will depend on how you want to achieve your layout.