Dat is niet retorisch: ik ben echt geïnteresseerd in het vinden van geweldige use-cases voor CSS-lay-outs met meerdere kolommen.
Het antwoord lijkt duidelijk. Gebruik kolommen als u inhoud in kolommen wilt splitsen, toch? Dit is over het algemeen het soort voorbeeld dat u aantreft in artikelen die laten zien hoe CSS-lay-outs met meerdere kolommen werken, inclusief onze eigen Almanak:
Recht op. Maar is dit een echte use-case? Mmmm misschien. Als de tekst relatief kort is, is het misschien een leuke touch. Zo heb ik het aan mezelf verkocht bij het herontwerpen van mijn website a paar jaar geleden. Dat is vandaag niet zo, maar zo zag het er toen uit:
Maar een heel lang artikel opgesplitst in kolommen? Ik vind het geweldig in kranten, maar ik aarzel om op een webpagina naar beneden te scrollen om één kolom te lezen, om vervolgens weer omhoog te scrollen om het opnieuw te doen.
Ik veronderstel dat we het kunnen gebruiken om twee elementen naast elkaar te plaatsen, maar flexbox is daar veel meer geschikt voor. Bovendien verhindert een beperking dat we de kolommen kunnen selecteren om ze afzonderlijk te dimensioneren. De kolommen moeten even breed zijn.
Een ding dat kolommen voor hen hebben, is dat ze de enige CSS-lay-outmethode zijn die fragmenten inhoud. (Dat wil zeggen, tenzij we aan het tellen zijn) CSS-regio's... wat is daar trouwens mee gebeurd?!) Dus als je een alinea in kolommen wilt opsplitsen, is dat al mogelijk zonder extra wrappers.
Wanneer moet u anders een doorlopend blok met inhoud in kolommen splitsen? Ik herinner me dat ik dat moest doen toen ik een grote, ongeordende lijst met items had. Ik hou van de manier waarop lijsten inhoud gemakkelijk te scannen kunnen maken, maar lange lijsten kunnen een kant van de pagina er superzwaar uit laten zien. Laten we bijvoorbeeld zeggen dat we alle post-tags voor CSS-Tricks in alfabetische groepen opsommen. Een lay-out met meerdere kolommen werkt daar prachtig voor:
Ga je gang en probeer de breedte van de viewport te wijzigen. Er zijn drie kolommen gedefinieerd, maar het aantal zal veranderen op basis van de hoeveelheid beschikbare ruimte. Ik moet dol zijn op al die responsieve goedheid zonder het mediaquery-werk!
Ik werkte aan een demo voor de :left pseudo-klasse en reikte naar columns omdat het een geweldige manier is om dingen te fragmenteren voor het afdrukken van demo's. Dus ik denk dat er een andere use-case is. En terwijl ik een demo maakte, realiseerde ik me dat een lay-out met meerdere kolommen kan worden gebruikt om een metselwerkraster van items te maken, zoals een afbeeldingengalerij:
Maar wat nog meer? Zijn we beperkt tot korte alinea's, lange lijsten en vrij stromende rasters?
