Grid de produtos com espaços em branco

@fabiocandeias O que vc já tentou fazer e quais problemas conseguiu identificar?

Seus problemas começam apartir da largura 960px.

– Existe estilização para pseudo elementos por exemplo: ‘li.product:nth-child(2n)’ isso não é bom porque esse item varia de acordo com a largura.

– O item da direita tem ‘float right’ e o da esquerda tem ‘float left’, isso está gerando o buraco no meio.

– Muitas declarações de !importants vai deixando os itens engessados e compromete a cascata.

Como é uma lista come com 100%, no momento que vc desejar exibir 2 itens lado a lado declare algo entorno de 49% quase 50% com o desconto do espaçamento entre um item e outro e quando desejar 04 itens a mesma coisa…

Um float left com clearfix
ou
Display inline-block (zerando os 4px gerados)

Você consegue deixar os itens lado a lado.