Responsive Textspalten mit CSS

Texte und Inhalte in einem responsive Layout gut lesbar dazustellen kann eine Herausforderung sein, insbesondere, wenn man Redakteuren oder sich selbst keine unnötige Arbeit bereiten will.

Der Idealfall wäre, wenn sich erstellte Inhalte automatisch und je nach Bildschirmgröße auf eine oder mehrere Spalten verteilten würden. Und mittels CSS ist es sogar problemlos machbar:

div {
-moz-column-width: 15em;
-webkit-column-width: 15em;
column-width: 15em;
}

Mit column-width lassen sich die maximalen Breiten der Spalten definieren. Wird die angegebene Breite erreicht, so wird der Inhalt in Spalten aufgeteilt. Je kleiner die gewählten Breiten sind, desto mehr Spalten werden erzeugt.

IE 10 und Opera können mit dem Standard-CSS-Befehl umgehen, Firefox, Chrome und Safari benötigen aktuell noch die entsprechenden Brower-Präfixe (-moz-, bzw. -webkit-). Der IE 9 sowie ältere Versionen können mit dem Befehl überhaupt nicht umgehen, was aber auch kein wirkliches Problem darstellt, da der Inhalt in dem Fall einfach einspaltig ausgegeben wird.

Ergänzend zu column-width gibt es noch folgende Anweisungen:

• column-gap: definiert den Abstand zwischen den Spalten
• column-rule: hiermit lassen sich Breite, Farbe und andere Styles des Bereichs zwischen den Spalten einstellen (z.B. wie im obigen Beispiel eine dünne Linie)
• column-count: diese Anweisung kann statt column-width eingesetzt werden und teilt den Inhalt in die angegebe Zahl Spalten auf

Beispiel:

column-gab: 20px;
column-width: 300px;
column-rule: 1px dotted #CCCCCC;

/*Firefox*/
-moz-column-gab: 20px;
-moz-column-width: 300px;
-moz-column-rule: 1px dotted #CCCCCC;

/*Safari, Chrome*/
-webkit-column-gab: 20px;
-webkit-column-width: 300px;
-webkit-column-rule: 1px dotted #CCCCCC;