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.