Wann verwenden Sie CSS-Spalten? PlatoBlockchain-Datenintelligenz. Vertikale Suche. Ai.

Wann verwenden Sie CSS-Spalten?

Das ist nicht rhetorisch: Ich bin wirklich daran interessiert, großartige Anwendungsfälle für mehrspaltige CSS-Layouts zu finden.

Die Antwort scheint einfach. 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 mehrspaltige CSS-Layouts funktionieren, einschließlich unserer eigenen Almanach:

Direkt am. Aber ist dies ein tatsächlicher Anwendungsfall? Mmm vielleicht. Wenn der Text relativ kurz ist, dann ist das vielleicht eine nette Geste. So habe ich es mir bei der Neugestaltung meiner Website a verkauft vor einigen Jahren. Das ist heute nicht mehr so, aber so sah es damals aus:

Wann verwenden Sie CSS-Spalten?

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 damit zwei Elemente nebeneinander platzieren, aber Flexbox ist dafür viel besser geeignet. Außerdem hindert uns eine Einschränkung daran, die Spalten auszuwählen, um sie individuell zu dimensionieren. Die Spalten müssen gleich breit sein.

Eine Sache, die für Spalten spricht, ist, dass sie die einzige CSS-Layoutmethode sind, die das kann Fragmente Inhalt. (Das heißt, es sei denn, wir zählen CSS-Regionen… 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üssen Sie möglicherweise einen fortlaufenden Inhaltsblock in Spalten aufteilen? Ich erinnere mich, dass ich das tun musste, als ich eine große alte ungeordnete Liste von Elementen hatte. Ich mag die Art und Weise, wie Listen Inhalte leicht scannen können, aber lange Listen können eine Seite der Seite sehr schwer aussehen lassen. Nehmen wir zum Beispiel an, wir listen alle Post-Tags für CSS-Tricks in alphabetischen Gruppen auf. Ein mehrspaltiges Layout funktioniert dafür wunderbar:

Fahren Sie fort und versuchen Sie, die Breite des Ansichtsfensters zu ändern. Drei Spalten sind definiert, aber die Anzahl ändert sich je nach verfügbarem Speicherplatz. Ich muss all diese reaktionsschnelle Güte ohne die Medienabfragearbeit lieben!

Ich arbeitete an einer Demo für die :left Pseudo-Klasse und erreicht columns weil es eine großartige Möglichkeit ist, Dinge zum Drucken von Demos zu fragmentieren. Also, ich denke, es gibt einen anderen Anwendungsfall. Und während ich eine Demo erstellte, wurde mir klar, dass ein mehrspaltiges Layout verwendet werden könnte, um ein Mauerwerk-Raster von Elementen zu erstellen, wie eine Bildergalerie:

Aber was sonst? Sind wir auf kurze Absätze, lange Listen und frei fließende Raster beschränkt?

Zeitstempel:

Mehr von CSS-Tricks