@@Gunther:

nuqneH

Ich würde mal einen Blick auf inline-block – eine Alternative zu float werfen.

Da ist immer das Problem mit dem Whitespace, das man eigentlich nicht durch Verrenkungen in der Formatierung des Quellcodes fixen möchte.

Die Lösung mit inline-block hat ihre Stärken darin, wenn sich die Anzahl von Boxen fester Breite je „Zeile“ an die Breite des Containers anpassen soll.

Aber das will man nicht immer. Beim responsive Design will man eher, dass sich die Breite der Boxen der Breite des Inhalts anpasst – in gewissen Grenzen. Dass man also die Anzahl der Boxen je „Zeile“ in der Hand hat. Dann ist man mit Float gut dabei:

  
.product-list  
{  
  padding: 0;  
  list-style: none;  
}  
  
.product-list li  
{  
  margin: …em;  
  padding: …em;  
}  
  
@media screen and (min-width: …em)  
{  
  .product-list::after  
  {  
    content: "";  
    clear: both;  
  }  
  
  /* zweispaltig */  
  
  .product-list li  
  {  
    width: 50%;  
  }  
  
  .product-list li:nth-child(2n)  
  {  
    clear: both;  
  }  
}  

Vom OP hier nicht gewünscht, aber in anderen Fällen weitere Media-Queries:

  
@media screen and (min-width: …em)  
{  
  /* dreispaltig */  
  
  .product-list li  
  {  
    width: 33.333%;  
  }  
  
  .product-list li:nth-child(2n)  
  {  
    clear: none;  
  }  
  
  .product-list li:nth-child(3n)  
  {  
    clear: both;  
  }  
}  

usw.

Dafür extra ein Grid Framework zu verwenden erscheint mir eher als "Overkill".

+1

Qapla'