Kolonner - CSS-triks | CSS-almanakk 2025

Med bare noen få CSS-regler kan du lage et utskriftsinspirert layout som har fleksibiliteten på nettet. Det er som å ta en avis, men når papiret blir mindre, justeres kolonnene og balanseres automatisk slik at innholdet flyter naturlig.

.intro ( columns: 300px 2; )

Den columnseiendommen vil akseptere column-count, column-widtheller begge eiendommene.

columns: || ;

Bruk av begge deler column-countog column-widthanbefales for å lage en fleksibel layout med flere kolonner. Dette column-countvil fungere som maksimalt antall kolonner, mens det column-widthvil diktere minimumsbredden for hver kolonne. Ved å trekke disse egenskapene sammen vil flerkolonnens layout automatisk brytes ned i en enkelt kolonne i smale nettleserbredder uten behov for mediespørsmål eller andre regler.

En layout med flere kolonner fungerer bra på blokkeringselementer inkludert lister for å gjøre en fleksibel navigering.

For å finjustere flerkolonnens oppsett ytterligere, bruk break-insidepå bestemte elementer for å hindre at de setter seg fast mellom kolonnene.