När använder du CSS-kolumner? PlatoBlockchain Data Intelligence. Vertikal sökning. Ai.

När använder du CSS-kolumner?

Det är inte retoriskt: Jag är verkligen intresserad av att hitta bra användningsfall för CSS-layouter med flera kolumner.

Svaret verkar enkelt. Använd kolumner när du vill dela upp något innehåll i kolumner, eller hur? Här är i allmänhet den typ av exempel du hittar i artiklar som visar hur CSS-layouter med flera kolumner fungerar, inklusive vår egen Almanac:

Rätt på. Men är detta ett verkligt användningsfall? Mmmmm kanske. Om texten är relativt kort, kanske det är en fin touch. Det var så jag sålde det till mig själv när jag designade om min hemsida några år sedan. Det är inte så idag, men så här såg det ut då:

När använder du CSS-kolumner?

Men en hel lång artikel uppdelad i kolumner? Jag älskar det i tidningar men är tveksam till att scrolla ner en webbsida för att läsa en kolumn, bara för att scrolla tillbaka för att göra det igen.

Jag antar att vi kan använda den för att placera två element sida vid sida, men flexbox är mycket mer lämpad för det. Dessutom hindrar en begränsning oss från att välja kolumner för att anpassa dem individuellt. Kolumnerna måste ha samma bredd.

En sak som kolumner har att göra för dem är att de är den enda CSS-layoutmetoden som fragment innehåll. (Det vill säga om vi inte räknar CSS-regioner… vad hände med dem, ändå?!) Så om du vill dela upp ett stycke i kolumner är det redan möjligt utan ytterligare omslag.

När annars kan du behöva dela upp ett kontinuerligt innehållsblock i kolumner? Jag minns att jag behövde göra det när jag hade en stor oordnad lista med föremål. Jag gillar hur listor kan göra innehåll lätt att skanna, men långa listor kan få ena sidan av sidan att se supertung ut. Låt oss till exempel säga att vi listade alla posttaggar för CSS-tricks i alfabetiska grupper. En layout med flera kolumner fungerar utmärkt för det:

Fortsätt och försök ändra storlek på visningsportens bredd. Tre kolumner är definierade men antalet kommer att ändras baserat på mängden tillgängligt utrymme. Jag måste älska all den där lyhörda godheten utan att mediefrågan fungerar!

Jag arbetade på en demo för :left pseudo-klass och sträckte sig efter columns eftersom det är ett bra sätt att fragmentera saker för att skriva ut demos. Så jag antar att det finns ett annat användningsfall. Och när jag gjorde en demo insåg jag att en layout med flera kolumner kunde användas för att skapa ett murat rutnät av föremål, som ett bildgalleri:

Men vad mer? Är vi begränsade till korta stycken, långa listor och fritt flytande rutnät?

Tidsstämpel:

Mer från CSS-tricks