Kolonner - CSS-tricks | CSS Almanak 2025

Med blot et par CSS-regler kan du oprette et printinspireret layout, der har fleksibiliteten på nettet. Det er som at tage en avis, men når papiret bliver mindre, justeres kolonnerne og balanceres automatisk, så indholdet flyder naturligt.

.intro ( columns: 300px 2; )

Den columnsegenskab vil acceptere column-count, column-widtheller begge ejendomme.

columns: || ;

Brug af begge column-countog column-widthanbefales til at oprette et fleksibelt layout med flere kolonner. Den column-countfungerer som det maksimale antal kolonner, mens den column-widthdikterer minimumsbredden for hver kolonne. Ved at trække disse egenskaber sammen, vil layoutet med flere kolonner automatisk nedbrydes i en enkelt kolonne i smalle browserbredder uden behov for medieforespørgsler eller andre regler.

Et layout med flere kolonner fungerer godt på blokelementer inklusive lister for at gøre en fleksibel navigation.

For at finjustere dit layout med flere kolonner yderligere skal du bruge break-insidepå bestemte elementer for at forhindre dem i at sidde fast mellem kolonnerne.