Uma solução para visualização de elementos utilizando os recursos de grid view e list view podem ser fácilmente aplicados com Jquery Veja abaixo o exemplo HTML

<div id="container"> <div class="buttons"> <button class="grid">Grid View</button> <button class="list">List View</button> </div> <ul class="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ul> </div>

Jquery

$('button').on('click',function(e) { if ($(this).hasClass('grid')) { $('#container ul').removeClass('list').addClass('grid'); } else if($(this).hasClass('list')) { $('#container ul').removeClass('grid').addClass('list'); } });

CSS

#container ul { list-style: none; } #container .buttons { margin-bottom: 20px; } #container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; } #container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }

Veja o exemplo em funcionamento: http://jsfiddle.net/v57JF/