Met slechts een paar CSS-regels kunt u een op afdrukken geïnspireerde lay-out maken met de flexibiliteit van internet. Het is net als het nemen van een krant, maar naarmate het papier kleiner wordt, worden de kolommen automatisch aangepast en in balans gebracht, waardoor de inhoud op natuurlijke wijze kan stromen.
.intro ( columns: 300px 2; )Het columnspand zal accepteren column-count, column-widthof beide eigenschappen.
columns: || ;Het gebruik van beide column-counten column-widthwordt aanbevolen om een flexibele lay-out met meerdere kolommen te maken. De column-countzal fungeren als het maximale aantal kolommen, terwijl de column-widthde minimum breedte voor elke kolom zal bepalen. Door deze eigenschappen samen te voegen, wordt de lay-out met meerdere kolommen automatisch opgesplitst in een enkele kolom met smalle browserbreedtes zonder dat er mediaquery's of andere regels nodig zijn.
Een lay-out met meerdere kolommen werkt uitstekend op blokelementen, inclusief lijsten, om een flexibele navigatie te maken.
Om uw lay-out met meerdere kolommen verder te verfijnen, gebruikt u break-insideop specifieke elementen om te voorkomen dat ze tussen kolommen blijven steken.
Meer informatie
- CSS Multi-column Layout Module Level 1 (Working Draft)
- MDN-documentatie
Browser-ondersteuning
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Alle | 9+ | 50+ | Alle | 11.5+ |
| Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle |