CSS3 Multi-Columns

Eines der Features von CSS3 denen ich schon mit einem breiten Grinsen im Gesicht entgegen fiebere ist column-count, column-rule und column-gap. Multi-Column-Layouts sind im Trend, gerade bei typografisch aufwändig gestalteten Seiten kann man hiermit den momentan in den Webtrends 2010 verzeichneten Newspaper-Style relativ einfach umsetzen.

Im Grunde genommen ist die Funktionsweise von Multi-columns schnell erklärt. Man nehme sich als Beispiel eine Tageszeitung die zweispaltig geschrieben ist. Diesen zwei Spalten wird im Regelfall eine fixe Breite zur Verfügung gestellt, in welche sich im Anschluss der Artikel eingliedern soll. Das Programm bricht die Absätze nun so um, das die beiden Spalten etwa gleich gefüllt sind.

Im Web wird es da etwas schwieriger. Nehmen wir zum Beispiel drei mit Text gefüllte Paragrafen, die wir anschließend auf zwei Spalten verteilen sollen. Nun gibt es mehrere Lösungsansätze, denen wir uns bedienen können. Der logischste wäre die vorhandenen Paragrafen mit zwei Divs zu umfassen, die Paragrafen anhand der Länge logisch auf beide aufzuteilen und die zwei umfassenden Container zu floaten.

Nun haben wir mit dieser Technik aber mehrere Probleme. Autoren müssen den Inhalt von Hand auf zwei Container verteilen, der Artikel kann im schlimmsten Fall nicht komplett markiert werden und die Semantik und logische Struktur des Inhalts wird auseinander gerissen.

Die Lösung: CSS3 Multi-Column

Mit dem Multi-Column Feature hält in CSS3 nun endlich eine Funktion Einzug, die das ganze nativ löst. Auch heute lassen sich, baut man sein Layout geschickt auf, die Anweisungen schon verwenden.

Werfen wir zunächst einen Blick auf die 3 wichtigsten Eigenschaften:

• column-count
• column-gap
• column-rule

Anhand dieser 3 Eigenschaften lässt sich schon ein mehrspaltiges Layout verwirklichen. Wichtig: die Eigenschaften werden nicht den Elementen zugewiesen, die sich auf mehrere Spalten verteilen sollen, sondern dem umfassenden Elternelement.

<div id="Elternelement">
	<p>Kindelemente</p>
	<p>Kindelemente</p>
</div>

Kommen wir nun zu den 3 Eigenschaften. Column-count legt die Anzahl der Spalten fest, auf die sich unsere Kindelemente verteilen sollen. Column-gap definiert den Abstand zwischen den Kindelementen und mit Column-rule lässt sich noch eine Trennlinie zwischen die einzelnen Spalten legen.

Auf der Nachfolgenden Grafik sieht man die Verteilung der einzelnen Kindelemente auf drei Spalten.

Die Kindelemente brechen automatisch so um, das die Spalten von rechts nach links gleich hoch gefüllt sind. Dabei spielt es keine Rolle ob es sich um ein, zwei oder zwanzig Elemente handelt.

Der Zwischenraum, der mit dem Wert column-gap festgelegt wird, erweitert sich nicht um die Pixel der zusätzlich vergebenen Trennlinie column-rule.

#Elternelement {
	...
	column-gap: 20px;
	column-rule: 1px solid #000;
	}

Auch wenn column-rule die gleichen Werte wie border enthalten darf, addiert sich die festgelegte Breite nicht auf column-gap. Eine logische Schlussfolgerung ist auch, das wenn:

#Elternelement {
	...
	column-gap: 0px;
	column-rule: 1px solid #000;	
}

definiert wird, die Trennlinie nicht angezeigt wird, da kein Abstand zwischen den Spalten deklariert wurde. Merke: column-rule addiert man nicht zu column-gap und column-gap kann nicht angezeigt werden wenn kein column-rule vergeben wurde.

Ausblick

Da CSS3 noch nicht integriert ist, stehen uns auch noch nicht alle Funktionen zur Verfügung, denn die Liste an weiteren Eigenschaften ist lang. So lassen sich Elemente wie Beispielsweise Überschriften mittels column-span über mehrere Spalten verteilen. Auch werden verschiedene Eigenschaften zur Verfügung stehen wie die Elemente in den Spalten umbrechen. Wer einen Blick auf Candidate Recommendation zu Multi-Columns wirft, der kann sich vorab schon einen Überblick schaffen.

Um das ganze noch mit einer Demonstration zu unterstützten, werden wir nachfolgend 5 Paragrafen auf zwei Spalten verteilen und uns dabei nur den oben behandelten Werten bedienen.

/* CSS Eigenschaften */
#elternelement {
	width: 389px;
		/*Mozilla Präfix -moz-*/
		-moz-column-count:2;
		-moz-column-rule: solid 1px #f2f2f2;
		-moz-column-gap: 29px;
		/*Webkit Präfix -webkit-*/
		-webkit-column-count:2;
		-webkit-column-rule: solid 1px #f2f2f2;
		-webkit-column-gap: 29px;
	padding: 0 20px;
	}
<!-- Html Markup -->
<div id="Elternelement">
	<p> ... </p>
	<p> ... </p>
	<p> ... </p>
	<p> ... </p>
	<p> ... </p>
</div>

Der Text kann Absatz für Absatz markiert werden und bleibt trotz der Aufteilung auf zwei Spalten semantisch korrekt. Natürlich lassen sich mit diesen Eigenschaften nicht nur Texte in Spalten aufteilen, sondern auch gesamte Layouts.

Browser Support: Firefox 3+, Chrome 4+, Safari 3.1+, Opera 10+