Under många år, CSS flyter har varit en fin, men ändå nödvändig komponent för att skapa webbplatslayouter. Om din design krävde flera kolumner vände du dig till floats. Problemet med denna metod är att, trots den otroliga uppfinningsrikedom som webbdesigners / utvecklare har visat för att skapa komplexa webbplatser layouter, CSS-flottörer var aldrig riktigt avsedda att användas på det här sättet.
Medan flottör och CSS-positionering säkert kommer att ha en plats i webbdesign under många år framöver, nyare layout tekniker inklusive CSS Grid och Flexbox ger nu webbdesigners nya sätt att skapa sina webbplatslayouter. En annan ny layoutteknik som visar mycket potential är CSS Multiple Column.
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 hindrat många webbproffs från att använda dessa stilar i sin produktion arbete.
I slutet av stödet för de äldre versionerna av IE experimenterar nu webbdesigners med ny CSS-layout alternativ, inklusive CSS-kolumner, och upptäcka att de har så mycket mer kontroll med dessa nya tillvägagångssätt än de gjorde med flyter.
Grunderna i CSS-kolumner
Som namnet antyder, CSS flera kolumner (även känd som CSS3 multi-column layout) låter dig dela upp innehåll i ett visst antal kolumner. De mest grundläggande CSS-egenskaperna som du skulle använda är:
- kolumnräkning
- kolumngap
För kolumneräkning anger du antalet kolumner du vill ha. Kolumngapet 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 upp ett block med textinnehåll i flera kolumner, liknande det du skulle se i en tidningsartikel. Anta att du har följande HTML-markering (notera att vi till exempel bara har börjat ett stycke, medan det i praktiken sannolikt skulle finnas flera stycken innehåll i denna markering):
Rubriken för din artikel.
Föreställ dig massor av stycken text här ...
Om du sedan skrev dessa CSS-stilar:
.innehåll {
-moz-kolumnantal: 3;
-webkit-kolumnräkning: 3;
kolumner: 3;
-moz-kolumn-gap: 30px;
-webkit-kolumn-gap: 30px;
kolumngap: 30 pixlar;
}
Denna CSS-regel skulle dela upp innehållsdelningen i tre lika 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 beräknar de nya bredderna för dessa kolumner för att dela upp innehållet jämnt. Observera att vi först använder de leverantörsprefixerade egenskaperna följt av de icke-prefixade deklarationerna.
Så enkelt som det är, kan dess användning på detta sätt ifrågasättas för webbplatsanvändning. Ja, du kan dela ett gäng innehåll i flera kolumner, men det här kanske inte är den bästa behandlingen upplevelse för webben, särskilt om höjden på dessa kolumner faller under "vikningen" på skärm.
Läsarna måste då bläddra upp och ner för att kunna läsa hela innehållet. Ändå är principen för CSS-kolumner så lätt 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 - det 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 tre kolumner med innehåll. Detta är en mycket vanlig webbplatslayout, och för att uppnå dessa tre kolumner skulle du normalt flyta de divisioner som finns i. Med CSS-flera kolumner är det så mycket lättare.
Här är några exempel på HTML:
Från vår blogg.
Innehållet skulle gå här ...
Uppkommande händelser.
Innehållet skulle gå här ...
CSS för att skapa dessa flera kolumner börjar med vad du såg tidigare:
.innehåll {
-moz-kolumnantal: 3;
-webkit-kolumnräkning: 3;
kolumner: 3;
-moz-kolumn-gap: 30px;
-webkit-kolumn-gap: 30px;
kolumngap: 30 pixlar;
}
Nu är utmaningen hä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 att dela upp innehållet i en individuell division, lägga till början på den i en kolumn och sedan fortsätta till 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 på innehåll i varje division).
Det är inte vad du vill ha. 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 den ska delas. Du kan uppnå detta genom att lägga till ytterligare en rad CSS:
.content div {
display: inline-block;
}
Detta kommer att tvinga de divisioner 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ågot här en fast bredd, kommer dessa kolumner att automatiskt ändra storlek när webbläsaren ändrar storlek, vilket gör dem till en idealisk applikation för lyhörda webbplatser. Med den "inline-block" -stilen på plats kommer var och en av dina tre divisioner att vara en distinkt innehållskolumn.
Använda kolumnbredd
Det 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-markering som tidigare visat kan vi istället göra detta med vår CSS:
.innehåll {
-moz-kolumn-bredd: 500px;
-webkit-kolumnbredd: 500px;
kolumnbredd: 500px;
-moz-kolumn-gap: 30px;
-webkit-kolumn-gap: 30px;
kolumngap: 30 pixlar;
}
.content div {
display: inline-block;
}
Sättet att detta fungerar är att webbläsaren använder denna "kolumnbredd" som det maximala värdet för den kolumnen. Så om webbläsarfönstret är mindre än 500 pixlar brett, skulle dessa tre divisioner visas i en enda kolumn, en ovanpå 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 två kolumner tillsammans med de angivna kolumnöppningarna, går webbläsaren automatiskt från en kolumnlayout till två kolumner. Fortsätt öka skärmbredden och så småningom får du en design med tre kolumner, var och en av våra tre divisioner visas i sin egen kolumn. Återigen är detta ett utmärkt sätt att bli lyhörd, vänlig för flera enheter layouter, och du behöver inte ens använda mediefrågor för att ändra layoutstilar!
Andra kolumnegenskaper
Förutom de egenskaper som täcks här finns det också egenskaper för "kolumnregel", inklusive färg-, stil- och breddvärden som gör att du kan 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.
Dags att experimentera
För närvarande stöds CSS Multiple Column Layout mycket bra. Med prefix skulle över 94% av webbanvändarna kunna se dessa stilar, och den grupp som inte stöds skulle egentligen bara vara mycket äldre versioner av Internet Explorer som inte stöds längre i alla fall.
Med den här supportnivån på plats finns det ingen anledning att inte börja experimentera med CSS-kolumner och distribuera dessa stilar på produktionsklara webbplatser. Du kan börja dina experiment med HTML och CSS som presenteras i den här artikeln och spela med olika värden för att se vad som fungerar bäst för webbplatsens layoutbehov.