6XC

CSS Meerkolommengenerator

Laat tekst in krantenstijl-kolommen vloeien — aantal, tussenruimte en scheidingslijn — met live voorbeeld en CSS.

784 weergaven

Meerkolommenlay-out laat lange tekst naast elkaar vloeien zoals op een krantenpagina. Wijzig het aantal en de tussenruimte en zie deze voorbeeldtekst direct herschikken. Schakel de lijn in om een dunne scheidingslijn tussen kolommen te tekenen. Bij lange artikelen verkort het de regellengte, wat het lezen vergemakkelijkt. Meerkolommenlay-out laat lange tekst naast elkaar vloeien zoals op een krantenpagina. Wijzig het aantal en de tussenruimte en zie deze voorbeeldtekst direct herschikken. Schakel de lijn in om een dunne scheidingslijn tussen kolommen te tekenen. Bij lange artikelen verkort het de regellengte, wat het lezen vergemakkelijkt.

CSS meerkolommenlay-out

column-count splitst de inhoud van een blok in gelijke krantenkolommen; column-gap bepaalt de tussenruimte en column-rule tekent een scheidingslijn (dezelfde syntaxis als border). Tekst stroomt automatisch van de ene kolom naar de andere — ideaal voor lange artikelen, footers en indexlijsten. Gebruik break-inside: avoid voor elementen die u niet over kolommen wilt laten splitsen.

Veelgestelde vragen

column-count of column-width?

column-count legt het aantal kolommen vast; column-width laat de browser zoveel mogelijk kolommen van minimaal die breedte passen — beter voor responsieve lay-outs. Beide kunnen samen worden ingesteld.

Hoe voorkom ik dat een element over kolommen wordt gesplitst?

Geef het break-inside: avoid; — handig voor kaarten, afbeeldingen met bijschriften en lijstitems.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren