Så här använder du CSS-kolumner för flera kolumnwebbsidor

I många år har CSS-flottor varit en fin, men nödvändig komponent för att skapa webbsidor. Om din design krävde flera kolumner vände du till flottor. Problemet med denna metod är att, trots den otroliga uppfinningsrikedom som webbdesigners / utvecklare har visat för att skapa komplexa sidlayouter, var CSS-flottor aldrig riktigt menade att de skulle användas på detta sätt.

Medan floats och CSS-positionering säkert kommer att ha plats i webbdesign i många år framöver, ger nyare layouttekniker, inklusive CSS Grid och Flexbox, nu webbdesigners nya sätt att skapa sina webbsidor. En annan ny layoutteknik som visar mycket potential är CSS Multiple Columns.

CSS-kolumner har funnits i några år nu, men brist på stöd i äldre webbläsare (främst äldre versioner av Internet Explorer) har hållit många webbprofessorer från att använda dessa stilar i sitt produktionsarbete.

Med slutet av stödet för de äldre versionerna av IE experimenterar några webbdesigners nu med nya CSS-layoutalternativ, CSS-kolumner medföljer och konstaterar att de har så mycket kontroll över dessa nya tillvägagångssätt än vad de gjorde med flottor.

Grunderna för CSS-kolumner

Som namnet antyder kan CSS Multiple Columns (även känd som CSS3 multi-column layout) du dela upp innehåll i ett angivet antal kolumner. De mest grundläggande CSS-egenskaperna du skulle använda är:

kolonn-count
kolonn-gap

För kolumnräkning anger du antalet kolumner du vill ha. Kolonnklyftan skulle vara rännorna eller avståndet mellan dessa kolumner. Webbläsaren tar dessa värden och delar upp innehållet jämnt i antalet kolumner du anger.

Ett vanligt exempel på CSS flera kolumner i praktiken skulle vara att dela ett block textinnehåll i flera kolumner, liknande det du skulle se i en tidningsartikel. Säg att du har följande HTML-märkning (observera att jag till exempel bara lägger början på ett stycke, medan det i praktiken sannolikt kommer att vara flera stycken innehåll i denna markering):


Rubriken på din artikel
Föreställ dig många stycken text här …

Om du då skrev dessa CSS-stilar:

.content {-moz-column-count: 3; -webkit-kolumnräkning: 3; kolumnräkning: 3; -moz-kolonn-gapet: 30px; -webkit-kolumnavstånd: 30px; kolumnavstånd: 30px; }

Denna CSS-regel skulle dela upp innehållsdelningen i 3 lika kolumner med ett gap på 30 pixlar mellan dem. Om du ville ha två kolumner istället för 3, skulle du helt enkelt ändra det värdet och webbläsaren skulle beräkna de nya bredderna för de här kolumnerna för att dela innehållet jämnt. Observera att vi använder först säljaren prefixade egenskaper först, följt av de icke-prefixade deklarationerna.

Så enkelt som det här är användningen på detta sätt tvivelaktigt för webbplatsanvändning. Ja, du kan dela upp en massa innehåll i flera kolumner, men det här kanske inte är den bästa läsupplevelsen för webben, speciellt om höjden på dessa kolumner faller under skärmens "vikning".

Läsarna skulle då behöva rulla upp och ner för att kunna läsa hela innehållet. Ändå är chefen för CSS-kolumner lika enkelt som du ser här, och det kan användas för att göra så mycket mer än att bara dela upp innehållet i vissa stycken - det kan faktiskt användas för layout.

Layout med CSS-kolumner

Säg att du har en webbsida med ett innehållsområde som har 3 kolumner innehåll. Detta är ett mycket typiskt webbplatslayout, och för att uppnå de tre kolumnerna skulle du normalt flyta uppdelningarna som finns. Med CSS multipelkolumner är det så mycket lättare.

Här är några exempel HTML:

 
Från vår blogg
Innehållet skulle gå här …
  Använda kolumnbreddDet finns en annan egenskap förutom "kolumnräkning" som du kan använda, och beroende på dina layoutbehov kan det faktiskt vara ett bättre val för din webbplats. Detta är "kolumnbredd". Med samma HTML-markup som tidigare visat, kan vi istället göra det med vår CSS:
 .content {-moz-column-width: 500px; -webkit-kolumnbredd: 500px; kolumnbredd: 500px; -moz-kolonn-gapet: 30px; -webkit-kolumnavstånd: 30px; kolumnavstånd: 30px; } .content div {display: inline-block; }
Så här fungerar det att webbläsaren använder den här "kolumnbredden" som det högsta värdet för den kolumnen. Så om webbläsarfönstret är mindre än 500 pixlar bred, skulle dessa 3 divisioner visas i en enda kolumn, en av topparna på en annan. Detta är en typisk layout som används för mobil / liten skärmlayout.
 






Eftersom webbläsarens bredd ökar för att vara tillräckligt stor för att passa 2 kolumner tillsammans med de angivna kolumnhålen, går webbläsaren automatiskt från en enda kolumnlayout till två kolumner. Fortsätt att öka skärmens bredd och så småningom kommer du att få en 3-kolonndesign, där var och en av våra 3 divisioner visas i sin egen kolumn. Återigen är det här ett bra sätt att få lite lyhörda, flera enheter vänliga layouter, och du behöver inte ens använda mediafrågor för att ändra layoutstilarna!
 Andra kolumnegenskaper
Förutom de egenskaper som omfattas här finns det också egenskaper för "kolumnregel", inklusive färg-, stil- och breddvärden som låter dig skapa regler mellan dina kolumner. Dessa skulle användas istället för gränser om du vill ha några rader som skiljer dina kolumner.
 Tid till experiment
För närvarande stöds CSS Multiple Column Layout mycket väl.Med prefix kan över 94% av webanvändarna se dessa stilar, och den ostödda gruppen skulle egentligen bara vara mycket äldre versioner av Internet Explorer som du kanske inte stöder längre än.
Med denna nivå av stöd nu på plats, finns det ingen anledning att inte börja experimentera med CSS-kolumner och använda dessa stilar på produktionskrävda webbplatser. Du kan starta dina experiment med HTML och CSS som presenteras i den här artikeln och spela runt med olika värden för att se vad som bäst fungerar för din webbplatss layoutbehov.