Multi-column - CSS

Lær at bruge CSS multi-column til at opdele tekst (og andet indhold) i kolonner som man kender det fra aviser

Introduktion

CSS multi-column kan bruges til at opdele indhold i kolonner.

Her ses et screenshot hvor CSS multi-column er brugt til at opdele tekst i kolonner.
css multi-column screenshot
Kortere linjer kan gøre teksten lettere at læse på en bred skærm da det kan være lettere at se hvilken linje der skal læses næste gang.

På mobilenheder med smalle skærme er det ikke nødvendigvis godt at opdele i kolonner da det kan gøre teksten svære at læse.

Browserunderstøttelse af CSS multi-column

Browser Multi-column Prefix Virker Virker ikke
Firefox logo
Firefox 27.0.1
ja -moz- -moz-columns
-moz-column-count
-moz-column-width
-moz-column-gap
-moz-column-fill
-moz-column-rule
-moz-column-rule-width
-moz-column-rule-style
-moz-column-rule-color
-moz-column-span
-moz-break-before
-moz-break-inside
-moz-break-after
-moz-column-break-before
-moz-column-break-inside
-moz-column-break-after
Opera logo
Opera 17.0
ja -webkit- -webkit-columns
-webkit-column-count
-webkit-column-width
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-break-after
-webkit-column-span
-webkit-column-fill
-webkit-break-before
-webkit-break-inside
-webkit-break-after
Safari logo
Safari 5.1.7
ja -webkit- -webkit-columns
-webkit-column-count
-webkit-column-width
-webkit-column-gap
-webkit-column-span
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-break-after
-webkit-column-fill
-webkit-break-before
-webkit-break-inside
-webkit-break-after
Chrome logo
Chrome 30.0.1599.69 m
ja -webkit- -webkit-columns
-webkit-column-count
-webkit-column-width
-webkit-column-gap
-webkit-column-span
-webkit-column-fill
-webkit-column-rule
-webkit-column-rule-width
-webkit-column-rule-style
-webkit-column-rule-color
-webkit-column-span
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-break-after
-webkit-column-fill
-webkit-break-before
-webkit-break-inside
-webkit-break-after
Internet Explorer logo
Internet Explorer 10.0.9200.16540
ja (uden prefix) columns
column-count
column-width
column-gap
column-fill
column-span
column-rule
column-rule-width
column-rule-style
column-rule-color
break-before
break-inside 1
break-after
Alle tests er udført på Windows 7 (64-bit)


1 Ser kun ud til at virke delvist.
Browserunderstøttelse fra caniuse.com :

Multi-column forklaring

Her ses et eksempel på brug af grundlæggende CSS multi-column kode.

Her ses et screenshot med forklaring af CSS koden.
css multi-column screenshot forklaring column-count column-rule-width column-gap
Bredden på column-rule-width påvirker ikke bredden på column-gab.

break forklaring

break-before, break-inside og break-after bruges på et block element (som <div>) der er barn af et multi-column element som i følgende kode.

Her ses forklaring af CSS koden.
css multi-column break-before break-inside break-after forklaring
break-before bestemmer om der skal brydes før elementet så elementet kommer til at stå øverst i næste kolonne.
css multi-column break-before break-inside break-after forklaring
break-inside bestemmer om indholdet af elementet må brydes. Hvis indholdet brydes kommer det til at fylde 2 eller flere kolonner.
css multi-column break-before break-inside break-after forklaring
break-after bestemmer om der skal brydes efter elementet så elementet er det sidste i kolonnen og efterfølgende indhold kommer til at stå i næste kolonne.
css multi-column break-before break-inside break-after forklaring

column-span forklaring

column-span bruges til for eksempel at få en overskrift til at stå hen over alle kolonnerne.

I en browser som understøtter column-span vil overskriften stå hen over alle kolonnerne som på dette screenshot.
css multi-column i browser som understøtter column-span
Hvis browseren ikke understøtter column-span så vil overskriften komme til at stå i kolonnerne på almindeligvis som på på dette screenshot.
css multi-column i browser som ikke understøtter column-span

column-fill forklaring

column-fill bruges til at bestemme om indholdet i kolonnerne skal fordeles ligeligt så der er lige meget i hver kolonne eller om kolonnerne skal udfyldes løbende hvilket kan betyde tomme kolonner hvis der ikke er nok indhold at udfylde kolonnerne med.

For at se forskellen lader det til at man skal sætte en højde på elementet.

I en browser som understøtter column-fill: balance fordeler teksten sig så der er nogenlunde lige meget tekst i hver kolonne (kolonnerne bliver cirka lige høje) som på dette screenshot.
css multi-column i browser som understøtter column-span
Hvis browseren ikke understøtter column-fill: balance vil teksten fordele sig på almindeligvis (som havde man valgt column-fill: auto) som på dette screenshot.
css multi-column i browser som ikke understøtter column-span

Property og value forklaring

Enheder med små skærme

På enheder med små skærme som mobiltelefoner er det muligvis bedst ikke at opdele tekst i kolonner da det muligvis bare vil gøre teksten svære at læse.

Man kan bruge Media Queries for at multi-column koden kun skal gælde når skærmen har en vis opløsning.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.