Kategorien
Weblog

CSS-Klassiker: multi-columns

Es gibt CSS, das zwar schon ziemlich alt ist, aber nie wirklich groß in Mode kam. Obwohl es eigentlich gar nicht so schlecht ist.

Ein Spaltenlayout mittels multi-columns zu gestalten, ist einer dieser CSS Befehle, die man eigentlich noch immer gut brauchen kann. In seiner Grundfunktion sieht ein CSS z.B. folgendermaßen aus:

.spalte {
          column-count: 5; 
         }

Der Text innerhalb dieses DIVs wird dann auf den ganzen Bildschirm gestreckt in fünf Spalten aufgeteilt:

Die Spalten lassen sich aber natürlich auch auf eine fixe Länge festlegen

.spalte {
          column-width: 200px; 
         }

bzw. man fasst beide Anweisungen zusammen:

.spalte {
          columns: 5 200px; 
         }

Mit Blick auf responsives Design muss natürlich ab einem bestimmten Breakpoint am Ende column-count: 1; gesetzt werden. Aber innerhalb der Media Queries gibt einem das in Sachen Spaltenlayout eine gute Möglichkeit zu gestalten.

Mit columns gibt es noch ein paar andere Möglichkeiten:

column-rule-color: #E458DD;
column-rule-style: solid;
column-rule-width: 2px;

Oder zusammengefasst:

column-rule: #E458DD solid 2px;

Die Anweisung column-rule stylt den rechten Trennstrich zwischen den einzelnen Spalten und funktioniert im Prinzip genauso wie border. Gibt man keine Anweisungen ein, also column-rule:unset; wird keinerlei Trennstrich angezeigt.

Als letztes lässt sich noch der Abstand zwischen den Spalten einstellen:

column-gap: 1em;

Alternativ würde man aber auch mit dem klassischen padding dieselben Ergebnisse erreichen.

Von Thomas Matterne

Thomas Matterne ist ausgebildeter Journalist mit einem Diplom in Wirtschaftsinformatik. Er arbeitete als Leiter der Online Redaktion von TV touring und als Chefredakteur von DenkZeit. Aktuell schreibt er neben dieser Seite in diversen anderen Online-Veröffentlichungen, wie z.B. das Kaffee Journal. Auf dieser Seite finden sich vor allem Themen aus den Bereichen Content- und Online-Marketing, sowie dem Feld IT allgemein.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.