CSS-Spalten-Generator Erstellen Sie Textlayouts mit mehreren Spalten und anpassbarer Spaltenanzahl, Abstand und Registrierungsstil.

🎨

CSS-Spalten-Generator

Erstellen Sie Textlayouts mit mehreren Spalten und anpassbarer Spaltenanzahl, Abstand und Registrierungsstil.

Spaltenanzahl oder -breite festlegen

Wählen Sie zwischen einer festen Spaltenanzahl und einem responsiven Spaltenbreitenmodus.

Stile für Spaltenregeln anpassen

Legen Sie die Größe der Lücken und passen Sie den Stil, die Breite und die Farbe der Trennlinie an.

CSS kopieren

Vorschau der Mehrspaltentextanordnung und Kopie des CSS-Codes.

Loading tool...

What Is CSS-Spalten-Generator?

Der CSS-Spalten-Generator erstellt Textlayouts mit mehreren Spalten, die an Zeitungs- oder Magazin-Entwürfe erinnern. Das CSS-Mehrspaltensystem ermöglicht es dem Inhalt, automatisch über mehrere Spalten zu fließen, und dieses Tool bietet Ihnen eine visuelle Kontrolle über alle wichtigen Eigenschaften. Sie können zwischen column-count (feste Anzahl von Spalten) oder column-width (responsive Spalten, die sich an die Breite des Containers anpassen) wählen. Die Eigenschaft column-gap steuert den Abstand zwischen den Spalten und column-rule fügt eine sichtbare Trennlinie zwischen den Spalten mit anpassbarer Stil-, Breiten- und Farbe hinzu. Der Vorschaubereich zeigt Ihre Einstellungen auf einem Beispieltext an, um zu demonstrieren, wie der Inhalt über die Spalten fließt. Diese Layouttechnik eignet sich hervorragend für textlastige Seiten, Artikel und Dokumentationen.

Why Use CSS-Spalten-Generator?

Wechseln zwischen column-count- und column-width-Modus
Anpassbare Spaltenregel mit Stil-, Breiten- und Farboptionen
Echtzeit-Vorschau mit fließendem Beispieltext
Sieben Registrierungsstiloptionen, einschließlich durchgezogen, gestrichelt und gepunktet

Common Use Cases

Artikel-Layouts

Erstellen Sie Zeitungsstile mit Mehrspaltenartikellayouts für eine bessere Lesbarkeit.

Dokumentationsseiten

Verwenden Sie Spalten für Glossare, Register und Referenzseiten.

Kartenlisten

Ordnen Sie kartenähnliche Inhalte in einem Mehrspaltengitterlayout an.

Footer-Inhalte

Organisieren Sie Footer-Links und -Informationen in ordentlichen Spalten.

Technical Guide

Das CSS-Mehrspaltensystem verwendet column-count, um die genaue Anzahl von Spalten anzugeben oder column-width, um eine Mindestspaltenbreite festzulegen (der Browser bestimmt die optimale Anzahl). Die Eigenschaft column-gap legt den Abstand zwischen den Spalten fest. column-rule ist ein Kurzbefehl für column-rule-width, column-rule-style und column-rule-color und fügt eine sichtbare Trennlinie zwischen den Spalten hinzu. Der Inhalt fließt automatisch von einer Spalte in die nächste. Um zu verhindern, dass Elemente über Spalten umbrechen, verwenden Sie break-inside: avoid. Die Eigenschaft column-span: all ermöglicht es einem Element, sich über alle Spalten auszudehnen (nützlich für Überschriften). Spaltenlayouts eignen sich gut für Textinhalte, können aber Probleme mit interaktiven Elementen oder Bildern verursachen. Für responsive Designs wird column-width im Allgemeinen bevorzugt, da es sich natürlicherweise an die Breite des Containers anpasst.

Tips & Best Practices

1
Verwenden Sie column-width für responsive Layouts, die sich an die Containergröße anpassen
2
Fügen Sie break-inside: avoid hinzu, um unangenehme Inhaltsbrüche zu vermeiden
3
Verwenden Sie column-span: all für Überschriften, die alle Spalten überspannen sollen
4
Halten Sie die Spaltenanzahl unter 4 für eine komfortable Lesbarkeit auf Bildschirmen

Related Tools

CSS-Flexbox-Spielplatz

Visueller CSS-Flexbox-Explorer mit interaktiven Steuerungselementen für alle Eigenschaften von Flex-Containern.

🎨 CSS & Design

CSS-Grid-Spielplatz

Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

🎨 CSS & Design

Responsiver Design-Tester

Vorschau von Websites bei gängigen Geräte-Breakpoints mit einem integrierten iframe-Viewer.

🎨 CSS & Design

Typographieskalen-Generator

Erstellen Sie eine modulare Typographieskala mit anpassbarer Basisgröße, Verhältnis und Einheiten.

🎨 CSS & Design

Frequently Asked Questions

Q Was ist der Unterschied zwischen column-count und column-width?

column-count legt eine feste Anzahl von Spalten fest. column-width legt eine Mindestbreite fest und lässt den Browser die Anzahl responsiv bestimmen.

Q Kann ich verhindern, dass Inhalte zwischen Spalten umbrechen?

Ja, verwenden Sie break-inside: avoid auf Elementen, die nicht über Spalten hinweg geteilt werden sollen.

Q Funktioniert das Mehrspaltenlayout mit Bildern?

Ja, aber große Bilder können Layoutprobleme verursachen. Verwenden Sie break-inside: avoid auf Bildcontainern.

Q Kann ich ein Element über alle Spalten hinweg spannen?

Ja, verwenden Sie column-span: all auf jedem Element, um es über die volle Breite aller Spalten zu erstrecken.

Q Wird das Mehrspaltenlayout in allen Browsern unterstützt?

Ja, das CSS-Mehrspaltenlayout wird in allen modernen Browsern unterstützt.

About This Tool

CSS-Spalten-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.