Hur och varför man använder CSS-kolumner istället för flytande för webbsideslayouter

Under många år har CSS-floats varit en kräsen, men ändå nödvändig, komponent för att skapa webbplatslayouter. Om din design krävde flera kolumner, övergick du till flytningar. Problemet med den här metoden är att, trots den otroliga uppfinningsrikedom som webbdesigners/utvecklare har visat för att skapa komplexa webbplatslayouter, var CSS-floats aldrig riktigt menade att användas på detta sätt.

Även om flytningar och CSS-positionering säkerligen kommer att ha en plats inom webbdesign i många år framöver, ger nyare layouttekniker inklusive CSS Grid och Flexbox nu webbdesigners nya sätt att skapa sina webbplatslayouter. En annan ny layoutteknik som visar mycket potentialen är CSS Multiple Columns

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

När stödet för de äldre versionerna av IE upphör, experimenterar vissa webbdesigners nu med nya CSS-layoutalternativ, inklusive CSS-kolumner, och upptäcker att de har så mycket mer kontroll med dessa nya tillvägagångssätt än de gjorde med flöten.

Grunderna i CSS-kolumner

Som namnet antyder låter CSS Multiple Columns (även känd som CSS3 multi-column layout) dig dela upp innehåll i ett visst antal kolumner . De mest grundläggande CSS-egenskaperna som du skulle använda är:
• kolumn- räkna
• kolumn-gap

För kolumnantal anger du antalet av kolumner du vill ha. Kolumngapet skulle vara rännorna eller avståndet mellan dessa kolonner. Webbläsaren tar dessa värden och delar upp innehållet jämnt i det antal kolumner du anger.

Ett vanligt exempel på CSS-flera kolumner i praktiken skulle vara att dela upp ett block med textinnehåll i flera kolumner, liknande vad du skulle se i en tidningsartikel. Säg att du har följande HTML-uppmärkning (observera att vi till exempel bara har satt början på ett stycke, medan det i praktiken sannolikt skulle finnas flera stycken med innehåll i denna uppmärkning):

Rubriken på din artikel

Föreställ dig många stycken av text här…

Om du sedan skrev dessa CSS-stilar:

 .innehåll {

 -moz-kolumnantal: 3;

 -webkit-kolumnantal: 3;

 kolumnantal: 3;
 -moz-kolumn-gap: 30px;

 -webkit-kolumn-gap: 30px;

 kolumngap: 30px;

 }


Denna CSS-regel skulle dela upp ”innehållet ” uppdelning i 3 lika stora kolumner med ett mellanrum 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 på dessa kolumner för att dela innehållet jämnt. Observera att vi använder egenskaperna med leverantörsprefix först, följt av deklarationerna utan prefix.

Hur enkelt det än är, användningen på detta sätt är tveksam för webbplatsen använda sig av. Ja, du kan dela upp ett gäng innehåll i flera kolumner, men det här kanske inte är den bästa läsupplevelsen för webben, särskilt om höjden på dessa kolumner faller under ”vikningen” på skärmen.

Läsare skulle då behöva scrolla upp och ner för att läsa fullständigt innehåll. Ändå är principen för CSS-kolumner lika enkel som du ser här, och den kan användas för att göra så mycket mer än att bara dela upp innehållet i vissa stycken – den kan verkligen 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 med innehåll. Detta är en mycket vanlig webbplatslayout, och för att uppnå de tre kolumnerna, skulle du normalt flyta de divisioner som finns i. Med CSS-flera kolumner är det så mycket enklare.

Här är lite exempel på HTML:

Från vår blogg
 Innehållet skulle hamna här...
Kommande evenemang
 Innehållet skulle hamna här...
 
 CSS för att göra dessa flera kolumner börjar med det du såg tidigare: 
 
 .innehåll {

 -moz-kolumnantal: 3;

 -webkit- kolumnantal: 3;
 kolumnantal: 3;
 -moz-kolumn-gap: 30px;

 -webkit-kolumn-gap: 30px;

 kolumngap: 30px;

 }
 
 Nu , utmaningen här är att webbläsaren vill dela upp detta innehåll jämnt, så om innehållslängden för dessa divisioner är annorlunda, kommer den webbläsaren faktiskt att dela upp innehållet i en enskild division, lägga till början av den i en kolumn och sedan fortsätta in i en annan (du kan se detta genom att använda den här koden för att köra ett experiment och lägga till olika längder av innehåll i varje division).  
 
 Det är inte vad du vill .  Du vill att var och en av dessa divisioner ska skapa en distinkt kolumn och, oavsett hur stor eller liten en enskild divisions innehåll kan vara, vill du aldrig att det delas upp.  Du kan uppnå detta genom att lägga till denna ytterligare rad med CSS: 
 
 .content div {
 display: inline-block;

 }
 Detta kommer att tvinga de uppdelningar som finns inuti "innehållet" att förbli intakt även när webbläsaren delar upp detta i flera kolumner.  Ännu bättre, eftersom vi inte gav någonting här en fast bredd, kommer dessa kolumner automatiskt att ändra storlek när webbläsaren ändrar storlek, vilket gör dem till en idealisk applikation för responsiva webbplatser.  Med den "inline-block"-stilen på plats kommer var och en av dina tre divisioner att vara en distinkt kolumn med innehåll.
  Använda kolumnbredd  
 Det finns en annan egenskap förutom "kolumnantal" 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". Genom att använda samma HTML-uppmärkning som tidigare, kunde vi istället göra detta med vår CSS: 
 
 .innehåll {
 -moz-kolumnbredd: 500px;

 -webkit-kolumnbredd: 500px;

 kolumnbredd : 500px;

 -moz-kolumn-gap: 30px;
 -webkit-kolumn-gap: 30px;

 kolumngap: 30px;

 }

 .content div {

 display: inline-block;
 }
 Sättet detta fungerar är att webbläsaren använder denna "kolumnbredd"  som det högsta värdet för den kolumnen.  Så om webbläsarfönstret är mindre än 500 pixlar brett, skulle dessa 3 uppdelningar visas i en enda kolumn, en överst på en annan.  Detta är en typisk layout som används för mobila/småskärmslayouter.
 När webbläsarens bredd ökar för att vara tillräckligt stor för att passa 2 kolumner tillsammans med de angivna kolumnmellanrummen, kommer webbläsaren automatiskt att gå från en enda kolumnlayout till två kolumner.  Fortsätt att öka skärmens bredd och så småningom kommer du att få en design med tre kolumner, med var och en av våra tre divisioner i sin egen kolumn.  Återigen, det här är ett utmärkt sätt att få några lyhörda, multi-enhetsvänliga layouter, och du behöver inte ens använda mediefrågor för att ändra layoutstilarna!
  Andra kolumnegenskaper  
 Utöver de fastigheter som omfattas här finns även fastigheter för "kolumn-regel", 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 linjer som separerar dina kolumner.
  Dags att experimentera