Mehrspaltige Liste je nach Auflösung umbrechen

10.10.2013

Ist eine mehrspaltige Darstellung mit fixen Umbrüchen definiert, kann diese abhängig von der Bildschirmbreite flexibel gestaltet werden. Unter einer bestimmten Breite lässt sich die Anzahl der Spalten reduzieren. Zusätzlich können die erzwungenen Umbrüche über den nth-child Selektor dynamisch gesetzt werden.

Dreispaltige Darstellung

.listEntry                                            {width:33.33%;}
.
listEntry:nth-child(3n 1)                          {clear:left}
.
listEntry:nth-child(3n 1) .listEntryInner          {margin:0 13px 10px 0}
.
listEntry:nth-child(3n 2) .listEntryInner          {margin:0 6px 10px 7px}
.
listEntry:nth-child(3n 3) .listEntryInner          {margin:0 0 10px 13px}

Zweispaltige Darstellung bei Bildschirmgrößen bis 540 Pixel

@media only screen and (max-width540px){
  .
listEntry                                    {width:50%}
  .
listEntry:nth-child(3n 1)                  {clear:none}
  .
listEntry:nth-child(2n 1)                  {clear:left}                                            
  .
listEntry:nth-child(2n 1) .listEntryInner  {margin:0 13px 10px 0}
  .
listEntry:nth-child(2n 2) .listEntryInner  {margin:0 0 10px 13px}
}

Im obigen Beispiel wird die Anzahl der Spalten unterhalb 540 Pixel von drei auf zwei reduziert. Gleichzeitig werden die Umbrüche über clear sowie die Abstände entsprechend der neuen Spaltenzahl innerhalb der Media Query überschrieben.