CSS 3 Columns - Mehrspalten Layout, Version 12

Alte Version

Dies ist eine alte Version des Inhalts in unserem Archiv. Besuchen Sie die aktuelle Version dieser Seite.

Diese Version wurde von michaelh am 18. April 2011 um 15:48 Uhr erstellt.
Bemerkung des Bearbeiters: 1.4.1

Änderungen gegenüber vorheriger Version anzeigen


Mit CSS 3 Column ist es möglich schnell und sauber Mehrspalten Layouts zu realisieren.
Mit nur wenigen Eigenschaften kann man einen langweilig anmutenden Fließtext in ein schickes Zeitungsdesign überführen.

Als Beispiel für den Artikel haben wir folgenden HTML Code

 
HTML
1
2
3
4
5
6
7
HTML<div id="article">
    <h1>Überschrift des Artikels</h1>
    <img src="/blau.jpg" /> 
    <p>
        Artikel Text
    </p>    
</div>
Firefox2Nein3Nein3.5Nein3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Nein10Nein
Safari3Nein4Unterstützt
Browser Support

Im Firefox 4 ohne CSS sieht es so aus

Bild zu CSS 3 Columns - Mehrspalten Layout

Column Count - Spaltenanzahl

Grundsätzlich gibt es zwei Möglichkeiten mit denen man festlegen kann, in wie viele Spalten der Text eingeteilt werden soll. Die erste Möglichkeit ist column-count, mit dieser beschäftigen wir uns in diesem Abschnitt und im nachfolgenden Teil lernen wir column-width kennen.
Mit der Eigenschaft column-count kann man den Text in beliebig viele Spalten einteilen.
Jedoch gilt es die Browser Präfixe zu beachten, für den Firefox wäre dies -moz-, für Chrome und Safari -webkit-.
Fügen wir zu unserer HTML Seite folgenden CSS Code hinzu.

 
css
1
2
3
4
5
6
7
CSS#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
}

Um den Text transformieren zu können, benötigen wir nur den umschließenden Container, im diesen Fall article und weisen diesem die entsprechenden Eigenschaften zu.
Wenn wir dies nun im Browser ausgeben erhalten wir folgende Ausgabe.

Bild zu CSS 3 Columns - Mehrspalten Layout

Zu beachten gilt bei dieser Methode, dass die Höhe automatisch angepasst wird d.h. wenn die Schriftgröße erhöht wird, wird auch entsprechend mehr Platz nach unten benötigt.

Column Width - Spaltenbreite

Wie weiter oben schon beschrieben, gibt es noch eine zweite Möglichkeit Spalten zu erzeugen und zwar mit column-width. Man beschreibt, wie breit eine Spalte sein darf, danach wird geschaut wie oft sie in die Parent-Box passt, der Wert des Quotienten ist nun die Anzahl der Spalten. Wieder muss die Höhe beachtet werden.

Die zweite Möglichkeit wäre nun

 
css
1
2
3
4
5
6
7
CSS#article {
    margin: 0 auto;
    width: 75%; 
    column-width: 380px;
      -moz-column-width: 380px;
      -webkit-column-width: 380px;
}

Column Gap - Spaltenabstand

Auch ist es möglich den Spaltenabstand zu definieren und zwar mit column-gab.
Die Spaltenabstände gelten jedoch nur für die Spalten zueinander und nicht für die Spalten zu anderen Containern.

In der CSS Datei sieht es nun folgendermaßen aus

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
CSS#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
    column-gap: 30px;
      -moz-column-gap: 30px;
      -webkit-column-gap: 30px;
}

Column Rule - Spaltengestaltung

Wenn man es noch etwas aufstylen möchte, kann man column-rule benutzen.
column-rule fasst die drei Eigenschaften column-rule-style, column-rule-color und column-rule-width zusammen. Mit der Rule Eigenschaft kann man den Spaltenabstand mit einem Strich versehen. Dabei stehen einem die gleichen Werte zur Verfügung wie man sie von der Border Eigenschaft her kennt.

Erweitern wir unsere CSS Datei durch folgende Angaben

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
CSS#article {
    margin: 0 auto;
    width: 75%; 
    column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
    column-gap: 30px;
      -moz-column-gap: 30px;
      -webkit-column-gap: 30px;
    column-rule: 4px dotted #9B7A15;
      -moz-column-rule: 4px dotted #9B7A15;
      -webkit-column-rule: 4px dotted #9B7A15;
}

Wenn wir uns nun unseren frisch gestylten Text im Firefox 4 ansehen, müsste er in etwa genau so aussehen

Bild zu CSS 3 Columns - Mehrspalten Layout
Fertig gestylter Text im Multy Column Layout

Mit nur diesen wenigen Zeilen CSS Code wurde aus einem langweiligen Text ein sauberer Artikel im Zeitungsformat. Nachteil: Bis jetzt wird Columns nur von wenigen Browsern unterstützt.