Wist je dat je tegenwoordig super simpel kolommen kunt maken? Eén regeltje CSS is voldoende. Bijvoorbeeld twee kolommen definieer je op een HTML element door aan te geven in de CSS: columns:2; zo simpel is het. Alles in deze kolom zal dan in twee even brede kolommen gezet worden, en de kolommen zullen even hoog zijn.
Dit is gedefinieerd in de CSS Multi-Column Layout Module van het W3C. Het is een uitbreiding op block layout mode en wordt ondersteund door alle moderne browsers, en zelfs IE 10 en 11.
Aantal kolommen
Hoe werkt het? Stel, je hebt een div element met hierin een paar koppen en verschillende paragrafen. Het is voldoende om aan de div de volgende CSS regel mee te geven:
div {
column-count:2
}
Dit zal er toe leiden dat alle inhoud van de div altijd in twee kolommen wordt weergegeven. Maar, natuurlijk leidt dit tot problemen op bijvoorbeeld telefoons, waar je dit niet zult willen. Lees verder!
Kolom breedte
Naast het aantal kolommen kun je echter ook een breedte van de kolommen opgeven. Deze zal echter niet absoluut gelden, maar is een aanduiding voor de “optimale” breedte van een kolom. Als er meer ruimte is, zullen er meer kolommen worden gemaakt, bij minder ruimte minder. Bij het opgeven van enkel een breedte, zal het aantal kolommen responsive worden aangepast!
div {
column-width:20em;
}
Aantal en breedte samen
Je kunt echter ook breedte en aantal samenvoegen. Neem de volgende CSS regel:
div {
column-count:3;
column-width:20em;
}
Er zullen nu drie kolommen worden weergegeven die steeds breder worden op grote schermen. Wanneer er echter niet meer voldoende breedte is, zal het aantal kolommen gereduceerd worden om zoveel mogelijk de gewenste breedte te benaderen. Perfect responsive, zonder media queries!
Kolom marge en rand
Daarnaast biedt de specificatie nog de mogelijkheid om de ruimte tussen kolommen aan te passen met column-gap, en een lijn tussen de kolommen te plaatsen met column-rule. Deze laatste werkt hetzelfde als borders: er kan een soort worden opgegeven, een breedte en een kleur.
Bijvoorbeeld:
div {
columns: 3 20em;
column-gap:50px;
column-rule: thin solid grey;
}
Het resultaat en alle code kun je hier bekijken:
https://codepen.io/zomtek/pen/xQOgXZ
