Grid für Produkte

[Hannes Weninger]

Hallo,

ich möchte auf meiner Seite einen Grid machen, indem Produkte dargestellt werden.
Dieser grid soll so aussehen, dass er 2 spaltig ist und mehr- reihig natürlich.
Eine Reihe kann links höher sein als auf der rechten Seite. Wie kann ich das am Besten machen. Soll ich da einen Grid verwenden wie z.B. Skeleton oder grid360 o.ä. oder wie würdet Ihr das machen.

Vielen Dank für hilfreiche Tipps.
lg
Hannes

[Gunther]

Hallo Hannes!

Eine Reihe kann links höher sein als auf der rechten Seite. Wie kann ich das am Besten machen. Soll ich da einen Grid verwenden wie z.B. Skeleton oder grid360 o.ä. oder wie würdet Ihr das machen.

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

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

Gruß Gunther

[Gunnar Bittersmann]

@@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'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

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.

Was schrub ich für Unsinn? Gemeint war auch hier: dass sich die Breite der Boxen der Breite des _Containers_ anpasst

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Was schrub ich für Unsinn?

Und das 'float' fehlte auch:

  .product-list li  
  {  
    float: left;  
    width: 50%;  
  }  

Qapla'

[Hannes Weninger]

Danke!
lg
Hannes

[Gunther]

@@Gunnar:

nuqneH

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

Stimmt, aber ...
wenn man seinen Quellcode eh dynamisch generiert, ist das entfernen von whitespace und/ oder line breaks eigentlich kein Problem.

Und wenn man eh schon ein Container-Element hat, dann kann man dessen 'font-size' auf Null setzen, was das "Problem" auch löst.

Gruß Gunther

[Gunnar Bittersmann]

@@Gunther:

nuqneH

Und wenn man eh schon ein Container-Element hat, dann kann man dessen 'font-size' auf Null setzen, was das "Problem" auch löst.

Bist du *sicher*?

Was, wenn im Browser eine Mindestschriftgröße eingestellt ist?

Wie setzt du dann die Schriftgröße für den Container-Inhalt in Browsern, die rem nicht verstehen?

Qapla'

[Gunther]

@@Gunnar:

nuqneH

Und wenn man eh schon ein Container-Element hat, dann kann man dessen 'font-size' auf Null setzen, was das "Problem" auch löst.

Bist du *sicher*?

Fast nie ... ;-)

Was, wenn im Browser eine Mindestschriftgröße eingestellt ist?

Davon ist dringend abzuraten. :-P
Ich habe das gerade mal im neuesten Firefox ausprobiert. Sieht für mich aber so aus, als wenn 'font-size: 0;' auch bei einer eingestellten Mindestschriftgröße funktioniert. Heißt also, die Mindestschriftgröße wirkt nur dann, wenn die Schriftgröße größer Null und kleiner Mindestschriftgröße ist.

Wie setzt du dann die Schriftgröße für den Container-Inhalt in Browsern, die rem nicht verstehen?

Der Fallback für 'rem' ist 'px'. ;-)
Das ist aber im Prinzip eh nur noch der IE 8.

Gruß Gunther