Det er ikke retorisk: Jeg er virkelig interesseret i at finde gode eksempler på brug af CSS-layout med flere kolonner.
Svaret virker ligetil. Brug kolonner, når du vil opdele noget indhold i kolonner, ikke? Her er generelt den slags eksempler, du finder i artikler, der viser, hvordan CSS-multi-kolonnelayout fungerer, inklusive vores helt egne Almanak:
Lige på. Men er dette en egentlig use case? Mmmmm måske. Hvis teksten er forholdsvis kort, så er det måske en fin detalje. Sådan solgte jeg det til mig selv, da jeg redesignede min hjemmeside nogle år siden. Sådan er det ikke i dag, men sådan så det ud dengang:
Men en hel lang artikel opdelt i spalter? Jeg elsker det i aviser, men er tøvende med at rulle ned på en webside for at læse en kolonne, for så at rulle tilbage op for at gøre det igen.
Jeg formoder, at vi kan bruge det til at placere to elementer side om side, men flexbox er langt mere egnet til det. Plus, en begrænsning forhindrer os i at vælge kolonnerne for at tilpasse dem individuelt. Søjlerne skal have samme bredde.
En ting kolonner har at gøre for dem er, at de er den eneste CSS layout metode, der fragmenter indhold. (Det vil sige, medmindre vi tæller CSS-regioner… hvad skete der alligevel med dem?!) Så hvis du vil dele et afsnit op i kolonner, er det allerede muligt uden yderligere indpakninger.
Hvornår skal du ellers opdele en kontinuerlig blok af indhold i kolonner? Jeg kan huske, at jeg skulle gøre det, da jeg havde en stor gammel uordnet liste over varer. Jeg kan godt lide den måde, lister kan gøre indhold let at scanne på, men lange lister kan få den ene side af siden til at se super tung ud. Lad os for eksempel sige, at vi listede alle post-tags for CSS-Tricks i alfabetiske grupper. Et layout med flere kolonner fungerer smukt til det:
Gå videre og prøv at ændre størrelsen på visningsportens bredde. Tre kolonner er defineret, men antallet vil ændre sig baseret på mængden af tilgængelig plads. Jeg skal elske al den lydhøre godhed uden medieforespørgslen!
Jeg arbejdede på en demo til :left pseudo-klasse og nåede efter columns fordi det er en fantastisk måde at fragmentere ting til udskrivning af demoer. Så jeg gætter på, at der er en anden use case. Og mens jeg lavede en demo, indså jeg, at et layout med flere kolonner kunne bruges til at skabe et murværk af elementer, som et billedgalleri:
Men hvad ellers? Er vi begrænset til korte afsnit, lange lister og fritflydende gitter?
