CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Meerdere kolommen

Met CSS kun je de tekstinhoud van een element in meerdere kolommen splitsen.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Browser ondersteuning

De getallen in de tabel geven de browserversie aan die de eigenschap volledig ondersteunt. Hou de muis op de afbeelding in het tabel om de versie nummer van de browsers te weergeven.

Eigenschap
column-count Ja Ja Ja Ja Ja
column-gap Ja Ja Ja Ja Ja
column-rule Ja Ja Ja Ja Ja
column-rule-color Ja Ja Ja Ja Ja
column-rule-style Ja Ja Ja Ja Ja
column-rule-width Ja Ja Ja Ja Ja
column-span Ja Ja Ja Ja Ja
column-width Ja Ja Ja Ja Ja

CSS column eigenschap

Hieronder zie je een lijst met de meest voorkomende kolom eigenschappen:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

Het maken van meerdere kolommen

Zoals je hierboven hebt gezien kun je met CSS meerdere kolom indelingen maken op een eenvoudige en efficiënte manier. Je kunt bijvoorbeeld layouts maken zoals in tijdschriften en kranten.

Door de eigenschap column-count te gebruiken geef je het aantal kolommen op waarin een element moet worden verdeeld. Hieronder zie je een eenvoudig voorbeeld van het splitsen van sommige tekst in drie kolommen. De tekst in het <div> element wordt verdeelt in 3 kolommen.

VoorbeeldVoorbeeld: 
div {
  column-count: 3;
}

Ruimte tussen de kolommen

Door de eigenschap column-gap te gebruiken kun je ruimte tussen de kolommen creëren. In het volgende voorbeeld wordt een ruimte van 30 pixels tussen de kolommen aangegeven.

VoorbeeldVoorbeeld: 
div {
  column-gap: 30px;
}

Verticale lijn plaatsen

Met de eigenschap column-rule-style kun een verticale lijn tussen kolommen plaatsen:

VoorbeeldVoorbeeld: 
div {
  column-rule-style: solid;
}

Met de eigenschap column-rule-width kun je de breedte van de lijn tussen kolommen opgeven:

VoorbeeldVoorbeeld: 
div {
  column-rule-width: 1px;
}

De eigenschap column-rule-color kun je gebruiken om de kleur van de lijn tussen kolommen op te geven:

VoorbeeldVoorbeeld: 
div {
  column-rule-color: red;
}

De eigenschap column-rule is een verkorte eigenschap (shorthand) voor het instellen van alle column-rule-* eigenschappen dat hierboven zijn genoemd. In het volgende voorbeeld wordt de breedte, stijl en kleur van de regel tussen kolommen ingesteld:

VoorbeeldVoorbeeld: 
div {
  column-rule: 1px solid red;
}

Uitstrekken van elementen

De eigenschap column-span geeft aan over hoeveel kolommen een element moet uitstrekken. In het volgende voorbeeld wordt aangegeven dat het element <h2> zich over alle kolommen moet uitstrekken.

VoorbeeldVoorbeeld: 
h2 {
  column-span: all;
}

Kolom breedte opgeven

De eigenschap column-width geeft aan hoe breedt een kolom moet zijn. In het volgende voorbeeld wordt aangegeven dat de breedte voor de kolommen 100px; moet zijn.

VoorbeeldVoorbeeld: 
div {
  column-width: 100px;
}

CSS kolom eigenschappen

De volgende tabel bevat alle CSS kolom-eigenschappen:

Eigenschap Beschrijving
column-count Geeft het aantal kolommen aan waarin een element moet worden in verdeeld.
column-fill Geeft aan hoe de kolommen moeten worden weergegeven.
column-gap Specificeert de ruimte tussen de kolommen.
column-rule Shorthand voor het instellen van alle column-rule-* eigenschappen.
column-rule-color Specificeert de kleur van de lijn tussen kolommen.
column-rule-style Specificeert de stijl van de lijn tussen kolommen.
column-rule-width Specificeert de breedte van de lijn tussen kolommen.
column-span Geeft aan over hoeveel kolommen een element moet uitstrekken.
column-width Geeft de breedte van de kolommen aan.
columns Shorthand voor het instellen van de column-width en column-count eigenschap.
Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.