Er zijn verschillende manieren om een layout met meerdere kolommen in CSS te maken. Hier zijn een paar voorbeelden:
1. Met behulp van een flexbox:
Flexbox is een CSS layout module die het gemakkelijker maakt om flexibele responsieve layoutstructuren te ontwerpen zonder gebruik te maken van float of positionering.
HTML:
CSS:
.flex-container { display: flex; }Elk kind van .flex-container zal nu een flex-item zijn en zal naast elkaar bestaan in kolommen.
1. Met CSS Grid:
CSS Grid layout is een tweedimensionaal lay-outsysteem, waarmee je items zowel in rijen als kolommen kunt positioneren. Hiermee kun je complexere ontwerpen maken dan met flexbox.
HTML:
CSS:
.grid-container { display: grid; grid-template-columns: auto auto auto; }1. Met CSS kolommen:
Als je je inhoud daadwerkelijk in kolommen wilt breken, zoals een krant, kun je de CSS kolom-eigenschappen gebruiken:
HTML:
Lorem ipsum dolor sit…
CSS:
.multicol-container { column-count: 3; }Elke paragraaf binnen .multicol-container zal nu over drie kolommen worden gespreid.
De keuze tussen deze methoden hangt af van het specifieke ontwerp en de vereisten van je website of applicatie.
