So verwenden Sie CSS3-Spalten

Mit zunehmender Vielfalt an Monitorgrößen ist es nicht sinnvoll, einzelne Textblöcke zu entwerfen, die die gesamte Breite des Bildschirms einnehmen. Die traditionelle Lösung besteht darin, Text manuell in Spalten aufzuteilen, was sehr zeitaufwendig ist; oder um Text dynamisch mit JavaScript zu teilen, das nicht universell funktioniert. Außerdem ist dies ein Präsentationsproblem, wir sollten es mit CSS ohne die Verwendung von Grid-Systemen oder Floats stylen können, oder?

CSS3 bietet tatsächlich eine Möglichkeit für Sie, Ihren Text in verschiedene Spalten zu stylen, es gibt sogar die Möglichkeit, einen Zwischenspeicher zu setzen - den Abstand zwischen diesen Spalten - auf diese Weise haben Sie die volle Kontrolle anstatt das Framework oder Grid-System diese Lücken für Sie einzustellen .

Das Beste von allem ist, dass CSS3 nicht so gut abschneidet. Wenn also jemand in Netscape Navigator browst, wird Ihre Seite nicht beschädigt.

Browserunterstützung

Es ist wichtig zu beachten, dass, während alle aktuellen Browser mehrere Spalten in CSS3 - ja sogar IE10 - unterstützen, viele neuere Versionen - IE9 zum Beispiel - nicht. Obwohl die Unterstützung gut ist, sollten Sie Browserpräfixe für Webkit (-webkit-) und Mozilla (-moz-) verwenden. Es gibt keine Notwendigkeit, -ms- oder -o für IE und Opera einzuschließen, da sie die Funktion entweder vollständig oder gar nicht unterstützen.

Die Eigenschaften

Diese CSS-Funktion bietet Ihnen eine Reihe von Eigenschaften, die Ihnen vollständige Kontrolle darüber geben, wie Ihre Inhalte im Browser gedruckt werden, und diese Eigenschaften sind:

• Spaltenanzahl: Hier geben Sie die Anzahl der Spalten an, die Sie auf das Element anwenden möchten.
• Spaltenbreite: Die Breite einer einzelnen Spalte. Beachten Sie, dass dieser Wert wahrscheinlich vom Browser geändert wird.
• Spaltenabstand: Die Breite der Lücke zwischen den Spalten.
• column-rule-width: Der Regelteil ist eine Art Rahmen für Ihre Spalten und hier geben Sie die Breite dieses Rahmens an.
• column-rule-style: Auch wie der Rahmen, wenn Sie den Stil angeben müssen.
• column-rule-color: Hier die Farbe der Regel.
• column-span: Der hier angegebene Wert teilt dem Browser mit, wie viele Spalten ein Element umfassen soll. Dies ist gut für Überschriften und funktioniert wie colspan und rowspan in Tabellen.

Mit all diesen Eigenschaften glaube ich nicht, dass wir wirklich etwas anderes brauchen, um die volle Kontrolle über unsere Säulen zu haben. Natürlich sind nicht alle diese Eigenschaften notwendig, damit das mehrspaltige Layout funktioniert, eigentlich ist nur die Spaltenzählung notwendig, aber Sie sollten immer auch die Spaltenlücke verwenden, um dem Text ein wenig Raum zu geben und nicht alle Spalten zu haben übereinander.

Um dies in die Praxis umzusetzen, braucht es nur zwei Codezeilen:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Wenn Sie auch eine Regel auf die Spalten anwenden möchten, müssen Sie nur die zusätzlichen Eigenschaften hinzufügen:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Wie die gebräuchlichere Eigenschaft border können Sie auch die Farbe, den Stil und die Breite in derselben Zeile stapeln:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Wenn Sie eine Überschrift haben und diese Überschrift alle Spalten umfassen soll, fügen Sie nur eine Zeile hinzu:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Demo

Sie können dies auf nahezu jeden HTML-Code anwenden, von einem einzigen Absatz bis zu mehreren