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.