Das ist keine rhetorische Frage: Ich bin wirklich daran interessiert, großartige Anwendungsfälle für CSS-Mehrspaltlayouts zu finden.
Die Antwort scheint einfach zu sein. Verwenden Sie Spalten, wenn Sie Inhalte in Spalten aufteilen möchten, richtig? Hier ist im Allgemeinen die Art von Beispiel, die Sie in Artikeln finden, die zeigen, wie CSS-Mehrspaltlayouts funktionieren, einschließlich unseres eigenen Almanacs
Genau. Aber ist das ein tatsächlicher Anwendungsfall? Vielleicht. Wenn der Text relativ kurz ist, dann ist es vielleicht eine nette Geste. So habe ich es mir verkauft, als ich meine Website vor ein paar Jahren neu gestaltet habe. Heute ist das nicht mehr so, aber so sah es damals aus
Aber ein ganzer langer Artikel, der in Spalten aufgeteilt ist? Ich liebe es in Zeitungen, aber ich zögere, eine Webseite nach unten zu scrollen, um eine Spalte zu lesen, nur um dann wieder nach oben zu scrollen, um es noch einmal zu tun.
Ich nehme an, wir können es verwenden, um zwei Elemente nebeneinander zu platzieren, aber Flexbox ist dafür viel besser geeignet. Außerdem hindert uns eine Einschränkung daran, die Spalten auszuwählen, um sie einzeln zu dimensionieren. Die Spalten müssen die gleiche Breite haben.
Ein Vorteil von Spalten ist, dass sie die einzige CSS-Layoutmethode sind, die Inhalte fragmentiert. (Das heißt, es sei denn, wir zählen CSS Regions… was ist eigentlich mit denen passiert?!) Wenn Sie also einen Absatz in Spalten aufteilen möchten, ist dies bereits ohne zusätzliche Wrapper möglich.
Wann sonst müssten Sie einen fortlaufenden Inhaltsblock in Spalten aufteilen? Ich erinnere mich, dass ich das tun musste, als ich eine große ungeordnete Liste von Elementen hatte. Ich mag es, wie Listen Inhalte leicht scannbar machen, aber lange Listen können eine Seite sehr schwer aussehen lassen. Nehmen wir zum Beispiel an, wir würden alle Post-Tags für CSS-Tricks in alphabetischen Gruppen auflisten. Ein Mehrspaltenlayout funktioniert dafür hervorragend
Probieren Sie es aus und ändern Sie die Breite des Viewports. Drei Spalten sind definiert, aber die Anzahl ändert sich je nach verfügbarem Platz. Ich liebe all diese reaktionsschnelle Güte ohne die Media-Query-Arbeit!
Ich habe an einer Demo für die :left Pseudoklasse gearbeitet und zu columns gegriffen, da es eine großartige Möglichkeit ist, Dinge für Druckdemos zu fragmentieren. Also, ich schätze, das ist ein weiterer Anwendungsfall. Und während ich eine Demo gemacht habe, erkannte ich, dass ein Mehrspaltenlayout verwendet werden könnte, um ein Masonry-Gitter von Elementen zu erstellen, wie eine Bildgalerie
Aber was noch? Sind wir auf kurze Absätze, lange Listen und frei fließende Gitter beschränkt?
Ich habe CSS-Spalten verwendet, um den Zeitplan eines Festivals anzuzeigen. Spalten ermöglichen es, die Elemente spaltenweise auszurichten, während die Ausrichtung von Elementen mit Flexbox oder Grid zeilenweise erfolgen würde, was nicht wünschenswert ist. Um Blöcke zusammenzuhalten und nicht zu brechen, muss ich display: table darauf anwenden.
Um zu vermeiden, dass die Kinder innerhalb der Spalten aufgeteilt werden, denke ich, dass Sie die Eigenschaft break-inside:avoid verwenden können. Ich habe sie erst diese Woche zum ersten Mal ausprobiert und sie scheint gut zu funktionieren.
Dies ist nützlich für Druckstile, bei denen Sie möglicherweise möchten, dass erweiterter Text aus einem Artikel effizienter auf weniger Papier gedruckt wird.
Spalten eignen sich auch hervorragend, wenn Sie eine erweiterte Liste von Elementen haben. Kombinieren Sie dies mit :has() und es ist ziemlich leistungsfähig. Finden Sie zum Beispiel heraus, ob eine Liste so viele Elemente hat. Wenn ja, richten Sie die Liste in Spalten ein. Siehe https://codepen.io/jen4web/pen/RwMEYyB
Ich habe sie einmal für eine lange Liste von Kontrollkästchen verwendet (einen Spaltenwähler für eine komplexe Datentabelle). Sie mussten in einen Dialog passen.
Fußnoten, insbesondere akademische Referenzen wie am Ende eines Wikipedia-Artikels, eignen sich gut für Spalten. Niemand wird sie einzeln lesen, daher gibt es kein Lesbarkeitsproblem, aber Sie möchten, dass der Fußnotenblock kompakt ist und nicht zu viel Seitenhöhe einnimmt.
Clevere Idee! Danke fürs Teilen.
Ähnlich wie beim Masonry-Grid-Beispiel habe ich CSS-Spalten verwendet, um eine Seite voller Testimonials zu layouten. Perfekt responsiv, und ich konnte die Spalten leicht so definieren, dass sie zwischen Blockquotes aufgeteilt werden, anstatt innerhalb. Offensichtlich, wenn Sie eine Reihe von Testimonials mit stark unterschiedlichen Längen haben, ist eine Aufteilung innerhalb eines Blockquotes möglicherweise wünschenswerter.
Spalten sind in Prince großartig. Als Opera noch Presto herstellte, veröffentlichten sie auch eine eher druckähnliche Tech-Demo, ähnlich wie in einem EPUB-Viewer.
Ich habe sie einmal für eine lange Liste von Kontrollkästchen verwendet (einen Spaltenwähler für eine komplexe Datentabelle). Sie mussten in einen Dialog passen.
Wow… seit Jahren entwickle ich im Web und kannte die
columnsFunktion von CSS nicht einmal – und sie funktioniert auch wirklich gut. Erwähnenswert ist auchbreak-inside: avoid-column, um zu verhindern, dass der Browser Inhalte über Spalten hinweg umbrichtIn Safari richten CSS-Spalten Elemente am oberen Rand nicht richtig aus, wenn Sie Ränder und Abstände verwenden, um sie zu verteilen. Die einzige Umgehung, die ich gefunden habe, ist ein leeres :before oder :after Element mit einer Höhe als Abstandhalter.
Ich verwende CSS-Spalten, um Blöcke mit variabler Höhe schön zu verteilen.
Anzahl und Inhalt oder Blöcke sind nicht vordefiniert. Spalten ermöglichen ein schöneres Layout als Flex oder Grid.
Ich verwende
columns, um einen Masonry-Effekt auf einer Seite mit kurzen Notizen zu meinen Lernerfahrungen in der Webentwicklung zu erstellen – https://romanvesely.com/log. Ähnlich wie Tweets, aber dichter positioniert. Mir gefällt auch, wie es selbst auf einem breiten Bildschirm aussieht.Das ist sowohl eine wirklich schöne Seite als auch eine wirklich großartige Möglichkeit, Notizen festzuhalten!