Kolumner - CSS-tricks | CSS Almanack 2025

Med bara några CSS-regler kan du skapa en utskriftsinspirerad layout som har flexibiliteten på webben. Det är som att ta en tidning, men när papperet blir mindre kommer kolumnerna att justeras och balanseras automatiskt så att innehållet kan flöda naturligt.

.intro ( columns: 300px 2; )

Den columnsegenskapen kommer att acceptera column-count, column-widtheller båda fastigheterna.

columns: || ;

Att använda båda column-countoch column-widthrekommenderas för att skapa en flexibel layout med flera kolumner. Den column-countkommer att fungera som det maximala antalet kolumner, medan den column-widthkommer att diktera minsta bredd för varje kolumn. Genom att dra ihop dessa egenskaper kommer flerkolumnlayouten automatiskt att brytas ner i en enda kolumn i smala webbläsarbredder utan behov av mediefrågor eller andra regler.

En layout med flera kolumner fungerar bra på blockelement inklusive listor för att göra en flexibel navigering.

För att finjustera din layout med flera kolumner, använd break-insidepå specifika element för att hindra dem från att fastna mellan kolumner.