Anleitung für responsive, spaltenfreundliche CSS Spalten

Mit CSS-Spalten können Sie ein von Print inspiriertes Layout mit wenig zusätzlichem Markup erstellen, das sich über eine feste Leinwand hinaus anpassen kann. Ein unterstützter Browser führt Berechnungen durch, um Inhalte ordentlich in Spalten umzubrechen und auszubalancieren. Wenn Sie bereits mit einem flüssigen Layout arbeiten, werden sich die Spalten automatisch neu anordnen. Mit der richtigen Kombination von Eigenschaften können CSS-Spalten eine interessante Layout-Option sein, die responsive-freundlich ist und gleichzeitig elegant abbaut.

Wo Spalten deklariert werden

Spalten können für jedes Block-Level-Element deklariert werden. Spalten können auf ein einzelnes Element angewendet oder durch Ansprechen ihres übergeordneten Elements auf mehrere Elemente angewendet werden.

In der folgenden Abbildung zeigt die linke Seite, wie CSS-Spaltenregeln auf den zweiten Absatz angewendet werden, um nur diesen Inhalt in Spalten umzuwandeln. Die rechte Seite zeigt, wie die Regeln auf ein Container-Element wie ein <div></div> oder <article></article> angewendet werden, um die Elemente in ein Mehrspaltenlayout umzuwandeln.

Wie man Spalten deklariert

Es gibt drei verschiedene Möglichkeiten, Spalten zu deklarieren

1. Deklarieren Sie column-count.
2. Deklarieren Sie column-width.
3. Deklarieren Sie beides (empfohlen).

Lassen Sie uns die verschiedenen Möglichkeiten zur Deklaration von Spalten erkunden.

1. Deklarieren Sie column-count

Verwenden Sie column-count, um die Anzahl der Spalten zu deklarieren.

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

Live-Demo

Sehen Sie den Pen [2] CSS Columns, count-count von Katy DeCorah (@katydecorah) auf CodePen.

Die Anzahl der Spalten bleibt gleich, auch wenn sich die Browserbreite ändert, wie im untenstehenden GIF gezeigt.

2. Deklarieren Sie column-width

Verwenden Sie column-width, um die Breite der Spalten zu deklarieren.

Der angegebene Wert ist kein absoluter Wert, sondern eine Mindestbreite. Unter Berücksichtigung der column-width entscheidet der Browser, wie viele Spalten von *mindestens* dieser Breite in den Platz passen. Der Browser berücksichtigt bei dieser Berechnung auch den Spaltenabstand (Gutter) (mehr dazu später). Dann dehnt der Browser die Spalten gleichmäßig aus, um die Breite des Containers auszufüllen.

Wenn Sie beispielsweise den Absatz in der Live-Demo unten inspizieren, werden Sie feststellen, dass die Spaltenbreite tatsächlich größer als 150px ist, was der eingestellte Wert von column-width ist.

article {
  -webkit-column-width: 150px;
     -moz-column-width: 150px;
          column-width: 150px;
}

Live-Demo

Sehen Sie den Pen [3] CSS Columns von Katy DeCorah (@katydecorah) auf CodePen.

Sobald der Browser nicht mindestens zwei Spalten mit der Breite von column-width unterbringen kann, erscheinen keine Spalten mehr und das Layout kehrt zu einem Einspaltenlayout zurück.

Das untenstehende GIF zeigt, wie die Spalten sich lösen, wenn die Browserbreite schmaler wird. Im Gegensatz zu column-count ist diese Eigenschaft von Natur aus responsive.

3. Deklarieren Sie beides (empfohlen)

Verwenden Sie column-count und column-width zusammen für die beste Kontrolle über CSS-Spalten. Sie können jede Eigenschaft einzeln deklarieren oder die Kurzschreibweise columns verwenden.

Wenn beide Eigenschaften deklariert sind, ist column-count die maximale Anzahl von Spalten und column-width ist die Mindestbreite für diese Spalten.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
}

/* or */

article {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
}

Live-Demo

Sehen Sie den Pen [4] CSS Columns, columns von Katy DeCorah (@katydecorah) auf CodePen.

Das untenstehende GIF zeigt, wie die Spalten auf eine schmaler werdende Browserbreite reagieren, wenn column-count und column-width zusammen verwendet werden.

Spalten anpassen

Es gibt mehrere Eigenschaften, um CSS-Spalten weiter anzupassen.

column-gap

Um den Abstand (Gutter) zwischen den Spalten anzupassen, deklarieren Sie column-gap.

Für die meisten Browser ist der Standardwert für column-gap 1em. Sie können einen neuen Wert deklarieren, solange er größer oder gleich 0 ist.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

Live-Demo

Sehen Sie den Pen [5] CSS Columns, column-gap von Katy DeCorah (@katydecorah) auf CodePen.

Der Browser führt notwendige Berechnungen durch, um die Spalten trotz eines größeren Abstands gleichmäßig zu verteilen und auszubalancieren.

Das untenstehende GIF zeigt, wie der Browser die Spalten löst und den Abstand aufhebt, wenn die Browserbreite schmaler wird.

column-rule

Um eine vertikale Linie zwischen jeder Spalte hinzuzufügen, deklarieren Sie column-rule.

Diese Eigenschaft ist die Kurzschreibweise für column-rule-width, column-rule-style, column-rule-color. Die Kurzschreibweise folgt dem gleichen Styling-Muster wie border.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}

Live-Demo

Sehen Sie den Pen [6] CSS Columns, column-rule von Katy DeCorah (@katydecorah) auf CodePen.

Ähnlich wie bei column-gap verschwindet die vertikale Linie, sobald die Browserbreite zu schmal wird, wie im untenstehenden GIF gezeigt.

column-span

Um den Spaltenfluss vorübergehend zu unterbrechen, deklarieren Sie column-span für ein untergeordnetes Element. Derzeit unterstützt Firefox diese Funktion nicht (aber Sie können dafür stimmen auf Bugzilla).

Das Bild unten enthält eine Überschrift, die den Beginn eines neuen Kapitels in der Geschichte anzeigt, aber der Spaltenfluss wird fortgesetzt.

Um die Überschrift aus dem Spaltenfluss herauszulösen, fügen Sie dem Element column-span: all hinzu. Diese Deklaration stoppt vorübergehend den Spaltenfluss, damit das Element die Spalten überspannen kann, und beginnt den Spaltenfluss mit dem nächsten Element neu.

h3 { 
  -webkit-column-span: all; 
          column-span: all; 
}

Live-Demo

Sehen Sie den Pen [7] CSS Columns, column-span von Katy DeCorah (@katydecorah) auf CodePen.

column-fill

Um die Art und Weise, wie der Inhalt die Spalten füllt, zu ändern, deklarieren Sie column-fill. Derzeit ist diese Eigenschaft nur in Firefox verfügbar.

Wenn einem spaltenbasierten Element eine Höhe hinzugefügt wird, verhält sich Firefox anders als andere Browser. Firefox gleicht den Inhalt automatisch aus, während die anderen Browser die Spalten sequenziell füllen.

Das folgende Bild zeigt, wie sich Firefox im Vergleich zu anderen Browsern verhält, wenn einem spaltenbasierten Element eine Höhe hinzugefügt wird.

In Firefox können Sie dieses Verhalten ändern, indem Sie column-fill: auto deklarieren. Diese Regel führt dazu, dass die Spalten sequenziell gefüllt werden, wie in der folgenden Live-Demo gezeigt.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
  height: 350px;
}

Live-Demo

Sehen Sie den Pen [8] CSS Columns, column-fill von Katy DeCorah (@katydecorah) auf CodePen.

Da eine Höhe deklariert werden muss, damit Firefox column-fill aktiviert, bricht die Höhenbeschränkung das flüssige Muster. Der Inhalt dehnt sich horizontal aus, da er nicht vertikal fließen kann, wie im untenstehenden GIF gezeigt. In diesem Fall könnte eine Media Query hinzugefügt werden, um die Höhe zu verwalten (mehr dazu später).

Die anderen Browser unterstützen column-fill nicht und füllen die Spalten sequenziell, wenn einem spaltenbasierten Element eine Höhe hinzugefügt wird. Es ist erwähnenswert, dass die Beschränkung die Flüssigkeit unterbricht, wenn einem spaltenbasierten Element, unabhängig vom Browser oder der Verwendung von column-fill, eine Höhe hinzugefügt wird.

Einschränkungen

Spalten können eine elegante Möglichkeit sein, Inhalte zu liefern, solange der Inhalt lesbar bleibt. Ein Mehrspaltenlayout kann schwer lesbar werden, wenn der Inhalt horizontal überläuft oder die Spalten höher als der Viewport werden.

Inhalt läuft horizontal über

Wie im Abschnitt column-fill gezeigt, dehnt sich das Element horizontal aus, um den Inhalt aufzunehmen, wenn einem spaltenbasierten Element eine Höhe hinzugefügt wird. Der Überlauf bricht das Layout und lenkt Benutzer in eine andere Richtung.

Mögliche Lösung: Erstellen Sie eine min-width Media Query, um die Höhenregel zu deklarieren.

In der folgenden Demo habe ich das Browserfenster verengt, um festzustellen, wann die Spalten zu überlaufen begannen, und diese Zahl notiert. Als Nächstes habe ich eine min-width Media Query mit dem Wert, wann die Spalten überlaufen, geschrieben und die Höhenregel in die Media Query verschoben.

article {
  -webkit-columns: 2 200px;
     -moz-columns: 2 200px;
          columns: 2 200px;
  -moz-column-fill: auto;
       column-fill: auto;
}
@media (min-width: 500px) {
  article {
    height: 350px;
  }
}

Live-Demo

Sehen Sie den Pen [11] CSS Columns, column-fill height von Katy DeCorah (@katydecorah) auf CodePen.

Wie im untenstehenden GIF gezeigt, ist die Höhenregel außer Reichweite, wenn die Spalten sich lösen, und die Spalten fließen vertikal.

Spalten werden höher als der Viewport

Wenn Ihre Spaltenhöhe über den Viewport hinausgeht, müssen Benutzer scrollen, um dem Spaltenfluss zu folgen.

Mögliche Lösung: Erstellen Sie eine min-height Media Query, um die Spalten zu aktivieren.

Im folgenden Beispiel werden die Spalten nur aktiviert, wenn das spaltenbasierte Element eine min-height: 400px; hat. Ich bin auf diese Zahl gekommen, indem ich die Browserbreite bis kurz vor dem Punkt verengt habe, an dem die Spalten sich lösen. Als Nächstes habe ich die Höhe des Browsers angepasst, um herauszufinden, wo die Spalten unter den Viewport zu fallen begannen. Diese Zahl habe ich für den Wert der min-height Media Query verwendet.

@media (min-height: 400px) {
  article {
    -webkit-columns: 2 350px;
       -moz-columns: 2 350px;
            columns: 2 350px;
  }
}

Live-Demo

Sehen Sie den Pen [10] CSS Columns, vertical friendly von Katy DeCorah (@katydecorah) auf CodePen.

Das untenstehende GIF zeigt, dass das spaltenbasierte Element mindestens 400 Pixel hoch sein muss, um den Inhalt in Spalten anzuzeigen.

Unterstützung

CSS-Spalten haben eine gute Unterstützung (IE10+) und erfordern immer noch Präfixe für alle Eigenschaften. Weitere Details zu den Mehrspalteneigenschaften finden Sie unter Can I Use….

Selbst wenn Ihr bevorzugter Browser Mehrspaltenlayouts nicht unterstützt, denken Sie daran, dass sie elegant in ein Einspaltenlayout abfallen. CSS-Spalten sind wie die Rolltreppen der Inhaltslieferung (wie von Mitch Hedberg treffend formuliert)

Ein Mehrspaltenlayout kann nicht abstürzen, es kann nur zu einem Einspaltenlayout werden.