Når bruker du CSS-kolonner? PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.

Når bruker du CSS-kolonner?

Det er ikke retorisk: Jeg er veldig interessert i å finne gode bruksområder for CSS-oppsett med flere kolonner.

Svaret virker greit. Bruk kolonner når du vil dele opp innhold i kolonner, ikke sant? Her er generelt den typen eksempel du finner i artikler som viser hvordan CSS-oppsett med flere kolonner fungerer, inkludert våre egne Almanakk:

Rett på. Men er dette en faktisk brukssak? Mmmmm kanskje. Hvis teksten er relativt kort, er det kanskje en fin detalj. Det var slik jeg solgte det til meg selv da jeg redesignet nettstedet mitt få år siden. Slik er det ikke i dag, men slik så det ut da:

Når bruker du CSS-kolonner?

Men en hel lang artikkel delt inn i spalter? Jeg elsker det i aviser, men er nølende med å bla nedover en nettside for å lese én kolonne, bare for å bla opp igjen for å gjøre det igjen.

Jeg antar at vi kan bruke den til å plassere to elementer side ved side, men flexbox er mye mer egnet for det. I tillegg hindrer en begrensning oss i å velge kolonnene for å dimensjonere dem individuelt. Søylene må ha samme bredde.

En ting kolonner har å gjøre for dem er at de er den eneste CSS-layoutmetoden som fragmenter innhold. (Det vil si med mindre vi teller CSS-regioner… hva skjedde med dem, uansett?!) Så hvis du vil dele et avsnitt opp i kolonner, er det allerede mulig uten ekstra omslag.

Når ellers må du dele en kontinuerlig blokk med innhold i kolonner? Jeg husker at jeg måtte gjøre det da jeg hadde en stor gammel uordnet liste over varer. Jeg liker måten lister kan gjøre innhold enkelt å skanne på, men lange lister kan få den ene siden av siden til å se supertung ut. La oss for eksempel si at vi listet opp alle posttaggene for CSS-triks i alfabetiske grupper. Et oppsett med flere kolonner fungerer vakkert for det:

Gå videre og prøv å endre størrelsen på visningsportens bredde. Tre kolonner er definert, men antallet vil endres basert på mengden tilgjengelig plass. Må elske all den responsive godheten uten mediesøkearbeidet!

Jeg jobbet med en demo for :left pseudo-klasse og nådde etter columns fordi det er en fin måte å fragmentere ting for å skrive ut demoer. Så jeg antar at det er en annen brukssak. Og mens jeg lagde en demo, skjønte jeg at et oppsett med flere kolonner kunne brukes til å lage et murnett av elementer, som et bildegalleri:

Men hva annet? Er vi begrenset til korte avsnitt, lange lister og frittflytende rutenett?

Tidstempel:

Mer fra CSS triks